Select the parents of a DOM object, and Exclude the Children of the selected parents

Question

I'd like to display a dialogue when a user clicks out of the DOM object that holds my app.

I was thinking, I'd just put a one time click event on all parents and then trigger the dialogue with that.

Because the DOM object that I'm getting the parent's for is included, it's triggering the dialogue even when the object it's self is clicked.

I want to, in essence, punch a hole in the parents to exclude the DOM that the user is interacting with.

I was thinking mouseleave and then click any other dom object would work.

Any suggestions?

Answer 1

$("#container").click(funcion(e) {
    if (this !== e.target) { return; }
    // the user clicked the parent directly (not one of its children)
});

Explanation: You check whether the event target is equal to the #container element. If not, that means that the click event bubbled up from one of the #container's children, and you just kill the event by returning. If yes, you do what you intended.

You can view how this works on my web-site (w3viewer.com). Click on the "About" link in the bottom left corner. A box will pop up. To close the box, you have to click outside of it.