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.

score 27 · Accepted Answer · answered Jan 20 '12 at 18:08

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 '12 at 18:08

Frédéric Hamidi

258,201
41
486
479

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 Jan 20 '12 at 18:13
I've tried it this way, but without any luck: if (event.target !== $('.topNavigation')) - any idea? – user398341 Jan 20 '12 at 18:14
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. – Frédéric Hamidi Jan 20 '12 at 18:15
Frederic - many thanks - it works now! I've tried with obj[0] - and it also works - so problem solved - much appreciate your help. – user398341 Jan 20 '12 at 18:18
1

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 Jan 20 '12 at 18:19
But doesn't : $(".topNavigation")[0] - refer to any element with this class on the page? I'm only interested in the one which was triggered - is there a way of doing it? – user398341 Jan 20 '12 at 18:38
That was not clear from your question, but in that case @Esailija's answer is more appropriate, and you should accept it instead of mine. – Frédéric Hamidi Jan 20 '12 at 18:41
@user398341 `$(".topNavigation")[0]` refers to the first element jQuery found in the page with that class, `$(".topNavigation")[1]` to the second and so on.. – Esailija Jan 20 '12 at 18:46
@Esailija - that's what I thought it does - thanks for clarification. – user398341 Jan 20 '12 at 19:11

Esailija · Answer 2 · 2012-01-20T18:23:24.203

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 '12 at 18:23

answered Jan 20 '12 at 18:18

Esailija

138,174
23
272
326

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! – user398341 Jan 20 '12 at 18:34
Worked well. I used console.log(event.target) to find which element was getting clicked. – Loren Mar 22 '20 at 18:27

jQuery on click $(document) - get clicked element

2 Answers2

Linked