jQuery: If user clicks out of div

Question

I am creating a popup in query. All is well with the popup on hover. I made it see a timer starts when user's mouse leaves the div to close it. If he enters the div again before the timer is done, then the timer is cleared.

This is fine, but what if a user clicks out of the div? I want that to also close the div. The only problem is that I don't want to attach click events to the wrapper on the page (because it includes the popout menu). I have seen techniques that wraps entire screen with a transparent div, and then attach a click event to hit. Although this may work, it confuses the user if he clicks the hidden div intending to click a link. He will have to click the link twice. Once two close the div (hiding the link), and another time to actually click think. Also, you loose in mouse cursors attached to any masked elements on the page (such as links cursor pointer, etc).

There has to be a way to check if the user clicked out of the div without a modal and without attaching events to the entire page (page wrappers and child elements included).

onclicksomewhereelse="closeme();"

lol.

Answer 1

Assuming:

<div id="dialog">...</div>

and:

#dialog { display: none; }

use:

$(document).click(function() {
  if ($(this).parents("#dialog").length > 0) {
    $("#dialog").hide();
  }
});

That won't interfere with other click() handlers you have.