Close Div or Menu On Click Outside w/ Javascript

If you program in Javascript, you’ve probably run across the situation where you want to have menus that open on a click, and that close when the user clicks outside the menu. I’ve developed a pretty simple way to do just that. I add an event listener to the document’s body.  When someone clicks it, we look for the event’s target id.  If it matches the ID of the box’s div, then do nothing.  If it doesn’t, close the menu.

Taking that a little further, it is inefficient to leave a click event listener on the entire body when it is not being used.  In this case, if the menu hasn’t been opened yet, there’s no reason to listen for a click outside of the menu.  Add the event listener in the callback of the div being shown.  In that same vein, when the div is being hidden again, remove the event listener.

  Show Div



  Click inside the black box, nothing happens. Click outside, it disappears



$('#showbox').click(function(){

  $('#bigbox').show(function(){
    document.body.addEventListener('click', boxCloser, false);
  });

});

function boxCloser(e){
  if(e.target.id != 'bigbox'){
     document.body.removeEventListener('click', boxCloser, false);
     $('#bigbox').hide();
  }
}

Also make sure you include jQuery in your project as some of the functionality above uses that library.