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

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 paren开发者_Go百科t'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?

$("#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.