Match event.target with existing jQuery object

Question

How can I do that?

event.target returns a HTML object,

and my element is a jQuery object.

Is there a better way to find out if event.target = my_jquery_object, besides comparing IDs or classes?

I want to make sure that it's the same object, not just a element with a similar class...

I tried with $(event.target) !== the_element and it fails

the_element is defined at the begining as $('.something', $(this))

---

What I am trying to do is to make a box close when the user clicks outside of it, but with the condition that the click wasn't made on the link that opened the box in the first place.

So I have this:

$(document).click(function(event){
  if(($(event.target).parents().index(box) == -1) 
    && box.is(':visible')){
      close(); 
  }

});

And I want to add another condition that verifies that the click wasn't made on the link that opened the box.

This works, but I don't like it:

if($(event.target).attr('id') != the_element)

:)

Answer 1

You can get the actual DOM element from the jQuery using .get(0) or simply the_element[0]. It would probably be better to check with jQuery, though.

if (the_element.is(event.target))
{
    ...
}

Using your example:

$(document).click(function(event){
  if (the_element.is(event.target)) {
      return false;
  }
  if(($(event.target).parents().index(box) == -1) 
    && box.is(':visible')){
      close(); 
  }

});

Answer 2

Try -

if(event.target === the_element[0])

the_element[0] should unwrap your jQuery object and return a 'normal' DOM object, you can then compare it against the DOM object returned by event.target.