javascript - 如何检测元素外部的点击？

Question

我有一些 HTML 菜单，当用户单击这些菜单的头部时，我会完全显示这些菜单。我想当用户在菜单区域之外单击时隐藏这些元素。

使用 jQuery 可以实现这样的功能吗？

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

Answer 1

Note: Using stopPropagation is something that should be avoided as it breaks normal event flow in the DOM. See this CSS Tricks article for more information. Consider using this method instead.

将单击事件附加到关闭窗口的文档正文。将单独的单击事件附加到容器，以停止传播到文档正文。

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

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