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

Question

I am trying to use a jQuery listener to listen for a users clicks on the html body and perform a specific function if anywhere on the body has been clicked except for a specific div and the children within that div.

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

I have been 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;
});

Which listens for all clicks on the body and unless the click comes from within the element I want the user to be able 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 multiple hierarchies such as this:

<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>

The target.parentNode.id gives me the objects parent element as opposed to the addressContainer id and thus does not work. Is use the top level parent from within nested elements? Other elements will be using this same code, so it has to work on both divs with just one level and div's with multiple.

UPDATE: Found a few excellent solutions, thanks guys. I do however have one other question. Refer to my code above where I set an initialClick boolean to false, then set it to true. I am doing this because for some reason if I don't, when I go to add the popup div, the initial click from the button used to set that popup fires the listener and closes the popup before I have a chance to do anything. This has been my solution around the problem, but is that the only way? Or am I just setting the listener slightly incorrect?

Answer 1

I usually do something like this:

$(document).click(function(e) {
  // hide popup
});

$('#popup_div').click(function(e) {
  e.stopPropagation();
});

That way the clicks from your popup never propagate to the document, so the close function never fires.

Answer 2

Replace

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

with

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

(I left the second clause alone since it didn't seem related to your question.)

This tries to find the closest ancestor with ID equal to clone.id. If none is found, an empty jQuery object is returned (i.e. one with length === 0), which is what we test for.

---

Incidentally: jQuery normalizes event.target, so you can just use that instead of whatever custom monstrosity EventUtility.getTarget(event) embodies.