hide a element when i click outside

Question

Hi, i have an element in my page.

<div id="element">try</div>

I want hide it when i click in others elements in the page.

How can i do it?

Answer 1

You can take advantage of bubbling here, like this:

$("#element").click(function(e) {
  e.stopPropagation();
});
$(document).click(function() {
  $("#element").hide();
});

If you click on the #element, it stops the bubble (using event.stopPropagation()) from going all the way up to document and firing it's click handler. If anywhere else is clicked it does bubble up, and when the click reaches document, it hides #element.