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