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.

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( != '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.

2 thoughts on “Close Div or Menu On Click Outside w/ Javascript”

Avatar Vishal says:
Thanks! but dropdown is not working after applying this code.

Is there any other solution?

Avatar Israel says:
Is this not possible with pure javascript?

Leave a Reply

Your email address will not be published. Required fields are marked *

Disclaimer: Some pages on this site may include an affiliate link. This does not effect our editorial in any way.

Todays Highlights
Zoom How to Change Name