jQuery on click $(document) - get clicked element

Question

I'm trying to figure out how to get the clicked element whey using $(document).click() method:

$(document).click(function() {
    if ($(this) !== obj) {
        obj2.hide();
    }
});

In the example above the obj is the object is the dropdown menu - and if clicked I don't want it to do anything, but if the click was on the body of the page or any other element - it should trigger the hide() method.

Frédéric Hamidi · Accepted Answer · 2012-01-20 18:08:35Z

27

You can use event.target. You should also compare DOM elements instead of jQuery objects, since two jQuery objects containing the same elements will still be considered as different:

$(document).click(function(event) {
    if (event.target !== obj[0]) {
        obj2.hide();
    }
});

answered Jan 20, 2012 at 18:08

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

user398341 Over a year ago

Thanks Frederic - isn't it possible with the jquery object? - the obj is the : var obj = $(this).find('.topNavigation'); - so it is referring to the specific object?

user398341 Over a year ago

I've tried it this way, but without any luck: if (event.target !== $('.topNavigation')) - any idea?

Frédéric Hamidi Over a year ago

Since obj was returned by find(), it's a jQuery object. These objects are compared by reference, not by content, which is why they're considered as different even if they contain the same elements. Using $(".topNavigation")[0] gives you the DOM element back, which you can then compare.

user398341 Over a year ago

Frederic - many thanks - it works now! I've tried with obj[0] - and it also works - so problem solved - much appreciate your help.

Esailija Over a year ago

note that it won't work if you have more than one element with that class or if a child element of it was clicked

|

Esailija · Accepted Answer · 2012-01-20 18:23:24Z

14

You most likely want to check all parent elements + the target itself for .topNavigation class

$(document).click(function(event) {
    if ( !$(event.target).closest( ".topNavigation" ).length ) {
        obj2.hide();
    }
});

edited Jan 20, 2012 at 18:23

answered Jan 20, 2012 at 18:18

Esailija

140k24 gold badges280 silver badges328 bronze badges

2 Comments

user398341 Over a year ago

I think this will work better with what I'm looking for as it also refers to the items, which overlay the topNavigation container and are inside if it - great tip - thank you!

Loren Over a year ago

Worked well. I used console.log(event.target) to find which element was getting clicked.

Collectives™ on Stack Overflow

jQuery on click $(document) - get clicked element

2 Answers 2

9 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related