Hide A Div On Clicking The Body Other Than The Div

I want to hide all div's hide when clicked on the body of the page other than the div. my div is

Solution 1:

You need to setup the body (or document) to hide the box on click and stop the click events on the div from bubbling up the DOM and triggering a body click event:

$('body').click(function(){
    $("#settingsBoxExpand").hide();
});

$('#settingsBoxExpand').click(function(event) {
    event.stopPropagation();
});

By placing the .hide() as part of the click handler for the body, it will hide the div when click events bubble up the DOM and reach the body. With .stopPropagation you prevent the event from reaching the body.

Event capturing and bubbling is important to understand with more advanced event handling; here's a little more reading if you're interested:

http://www.quirksmode.org/js/events_order.html

Share

You may like these posts

• 
  Windows Store App And Iframe Cookie
• 
  Flickr Json Returning Error In Javascript Cross Domain
• 
  Display Correct Fa Fa Icons Inside Phone And Email Input Boxes
• 
  Convert Percent Into A Decimal In Html/ Javascript