Use jQuery to listen for all clicks on the html body. Except for a specific div and its children

Question

I am trying to use the jQuery listener to listen for user clicks on the html body and perform a specific function if clicked anywhere on the body, except for a specific div and children of that div.

The idea is that the div is an element of type popup and instead of having a close button that the user can click, they should just be able to click anywhere on the page except this div and it will automatically close.

I am using this listener:

var initialClick = false; $('body').on('click.addPhoneListeners', function(event) { var target = EventUtility.getTarget(event); if(initialClick) { if(target.parentNode.id != clone.id && target.id != '') { finish(); }; } initialClick = true; }); 

Who listens for all clicks on the body, and if the click does not appear inside the element that I want the user to interact with, it closes. Unfortunately, this only works with a div that has only one level of children. As soon as I start getting some hierarchies, for example:

 <div id="addressContainer"> <div id="address" class="hidden row"> <div class="row"> <div id="address.primary" class="hidden">P</div> <div id="address.type"></div> <div id="address.street"></div> <div id="address.editButton" class="hidden"><a id="addressEditButton">Edit</a></div> <div id="address.deleteButton" class="hidden"><a id="addressDeleteButton">Delete</a></div> </div> <div class="row"> <div id="address.city"></div> <div id="address.state"></div> <div id="address.zip"></div> </div> <input type="hidden" id="address.id"></input> </div> </div> 

Target.parentNode.id gives me the parent of the objects as opposed to id addressContainer and therefore does not work. Is a top-level parent of nested elements used? Other elements will use the same code, so it should work on both divs with the same level and divs with several.

UPDATE: Found some great solutions, thanks guys. I've got one more question. Refer to my code above where I set initialClick boolean to false and then set it to true. I do this because for some reason, if I do not, when I go to add a pop-up div, the initial click of the button used to set this pop-up window calls the listener and closes the pop-up window before I there will be a chance to do something. This was my solution to the problem, but is this the only way? Or am I just misconfiguring the listener?

Answer 1

Usually I do something like this:

 $(document).click(function(e) { // hide popup }); $('#popup_div').click(function(e) { e.stopPropagation(); }); 

Thus, clicks from your popup never apply to the document, so the close function never works.

Answer 2

Replace

 if(target.parentNode.id != clone.id) 

from

 if ($(target).closest("#" + clone.id).length === 0) 

(I left the second sentence separately, as this did not seem to be related to your question.)

This tries to find the closest ancestor with an id equal to clone.id . If none are found, an empty jQuery object is returned (i.e., One with length === 0 ), which we are testing.

---

By the way: jQuery normalizes event.target , so you can just use this instead of EventUtility.getTarget(event) custom monster EventUtility.getTarget(event) .