In this tutorial, I’m gonna demonstrate you how to track if a click is being made outside of an HTML element. In this example, we are going to close or hide div when clicking outside of it.

If you have ever found with menus boxes that open on click event, but want them to Close when a user clicks outside of the menu element, here is a simple way to do so. I’m gonna add an event listener to the document’s body.  When someone clicks it, we look for the event’s targeted id. If the ID is same as the box’s div, then do nothing.  If it doesn’t, fadeOut the menu box.

How to close hide div when clicking outside

$(document).mouseup(function (e){

	var container = $("#YOUR_TARGETED_ELEMENT_ID");

	if (!container.is(e.target) && container.has(e.target).length === 0){

		container.fadeOut();
		
	}
}); 

Note: don’t forget to change “YOUR_TARGETED_ELEMENT_ID” with your targeted element’s ID.

To learn more interesting web development tricks please subscribe us, and share this article.

You may also like

• Split Unordered List Into Multiple Columns using CSS3 Property

The post Close or Hide Div when clicking outside appeared first on My Programming Tutorials.