How do I detect a click outside an element?

Question

I have some HTML menus, which I show completely when a user clicks on the head of these menus. I would like to hide these elements when the user clicks outside the menus' area.

Is something like this possible with jQuery?

$("#menuscontainer").clickOutsideThisElement(function() {

// Hide the menus 

});

Answer 1

To detect a click outside an element you can attach a click event to the document body which closes the window. Attach a separate click event to the container which stops propagation to the document body.

$(window).click(function() { 

//Hide the menus if visible 

}); 

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

});

Are you willing to pursue a career in Web Development, here's an opportunity for you Web Developer Certification provided by intellipaat!