Friday, 19 May 2017

javascript - How do I detect a click outside an element?



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




NOTE: Using stopEventPropagation() is something that should be avoided as it breaks normal event flow in the DOM. See this article for more information. Consider using this method instead




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();
});

No comments:

Post a Comment

c++ - Does curly brackets matter for empty constructor?

Those brackets declare an empty, inline constructor. In that case, with them, the constructor does exist, it merely does nothing more than t...