Compare 'e.target' to a jQuery object

Question

What I want to do:

( clickedObject === someDiv ) //returns true or false

What I tried

( $(e.target) === $('.selector') ); //returns a false negative.

My workaround

( $(e.target).attr('class') === $('.selector').attr('class') ); //works as intended, not so clean though.

What is the right way to compare the object I clicked to an object in the DOM?

Contend

Answer 1

To check if e.target has this class you can use the hasClass function.

if ($(e.target).hasClass("selector"))

Or, if you really want to compare objects, note that jQuery selectors return a collection of items, so I think you'll want

if (e.target === $('.selector')[0])

Sporocyst

I like this answer, because it describes why my approach did not work. jQuery returns a collection of items. – Contend

Answer 2

You're close. Use .is() instead:

if($(e.target).is('.selector')) {
    // Your code
}

The trick here is that you wrap e.target in a jQuery object to allow it access to all the useful jQuery methods.

If you're just seeing whether e.target has a certain class, try using .hasClass() in place of .is():

if($(e.target).hasClass('selector')) {
    // Your code
}

Either method works, although .hasClass() is a little clearer as to what the code does, and is faster than using .is()

Plutocracy

if you already have a reference to the element you want to compare against, the following works: $myButton.is(e.target) – Koziol

Answer 3

If you want to match the element that the event is attached to you can use $(this), or if you want to find which element triggered the event use $(event.target).

Below is an example of both of these.

http://jsfiddle.net/Phunky/TbJef/

Unless you're using event delegation these will be the same though and if there the same element.

Domitiladomonic

Answer 4

Obviously using .is() function is the best solution here.

If you find yourself doing such comparison, try to check if it is possible to use embedded jQuery mechanisms like this:

$(element).on("click", ".selector", function() {
    alert("clicked");
});

Second argument in the .on() method is a target selector. When using this construction (read more: http://api.jquery.com/on/#direct-and-delegated-events) there will be no need to make any additional comparisons.

https://jsfiddle.net/m5zysufy/

Whit

Answer 5

$(document).click(function (e) {
  e.stopPropagation();
  var container = $('.dropdown-list').attr('class');
  if ($(e.target).attr('class') == container) {
    $('.dropdown-menu').slideToggle();
  } else {
    $('.header .header-elem .dropdown-nav .dropdown-menu').slideUp();
  }
});

Foxtail

Add some explanation to your answer – Studley