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)

:)

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)

:)

• javascript
• jquery

4 Answers 4

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(); 
  }

});

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.

Maybe I'm wrong, but it looks like nobody understood the question?... I also want to know how to GET JQUERY OBJECT on which I used listener function from the EVENT.TARGET, but not a DOM node for a jquery object!!)) So... I found not a very handy, but working solution:

var elem = $('<input type="text" class="input" />');
elem.focus( $.proxy( function( e )
{
    this.onInpFocus( e, elem );
}, this ) );

And modified the listener's callback method to receive 2 arguments:

onInpFocus : function( e, inp )

Instead of using simple way like:

elem.focus( $.proxy( this.onInpFocus, this ) );

Actually, I found another way, much more handy one :) Just need to use the data argument:

Data to be passed to the handler in event.data when an event is triggered.

Now my code looks like this:

var inp = $('<input type="text" />');
inp.focus( { j : inp } , $.proxy( this.onInpFocus, this ) );

//and the handler method
onInpFocus : function( e )
{
var inp = e.data.j;
...
}