javascript - 如何检测元素外部的点击？(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. (我有一些HTML菜单，当用户单击这些菜单的标题时，它们会完整显示。) I would like to hide these elements when the user clicks outside the menus' area. (当用户在菜单区域之外单击时，我想隐藏这些元素。)

Is something like this possible with jQuery? (jQuery可能会发生这种情况吗？)

$("#menuscontainer").clickOutsideThisElement(function() {
    // Hide the menus
});

  ask by community wiki translate from so

Answer 1

NOTE: Using stopEventPropagation() is something that should be avoided as it breaks normal event flow in the DOM. (注意：应该避免使用stopEventPropagation() ，因为它会破坏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. (将单独的click事件附加到容器，以停止传播到文档主体。)

$(window).click(function() {
//Hide the menus if visible
});

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