Hide when clicked on document except when clicked on a div

Question

I want to hide a div when clicked on a document but I dont want to hide that div when someone clicks in it or clicks a link or a button in it. Also, I have some links inside that div set to prevent the click action (return false;) and send a ajax request.

I tried:

$(document).click(function(e) {
      $('#bubble').hide();
});

$('#bubble').click(function(e) {
    return false;
});

It works fine but the links and buttons under the #bubble doesn't work.

Answer 1

try to bring the event target object into play here.

$(document).bind('click', function(event){
   if(/^HTML$/.test(event.target.nodeName))
      $('#bubble').hide();
});

That is probably some kind of unorthodox. This will pretty much emulate the .live() functionality from jQuery, by just checking the event target on the top of the bubble.

Answer 2

Instead of return false; use event.stopPropagation() like this:

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

This stops the click event from bubbling up to document like you want, but won't kill the event dead in its tracks like return false; will. All you need to do in this case is prevent the default bubbling behavior, this does only that :)