我有一些HTML菜单，当用户单击这些菜单的头部时，我会完全显示这些菜单。当用户在菜单区域外单击时，我希望隐藏这些元素。
jQuery是否可以实现这样的功能？
$("#menuscontainer").clickOutsideThisElement(function() {
// Hide the menus
});
当前回答
注意：应该避免使用stopPropagation，因为它会破坏DOM中的正常事件流。有关更多信息，请参阅这篇CSS技巧文章。请考虑改用此方法。
将单击事件附加到关闭窗口的文档正文。将一个单独的单击事件附加到容器，以停止传播到文档正文。
$(window).click(function() {
//Hide the menus if visible
});
$('#menucontainer').click(function(event){
event.stopPropagation();
});
其他回答
我很惊讶没有人真正承认这一事件：
var button=document.getElementById（'button'）；button.addEventListener（'click'，函数（e）{e.target.style.backgroundColor=“绿色”；});button.addEventListener（'焦点'，函数（e）{e.target.style.backgroundColor=''；});<!DOCTYPE html><html><head><meta charset=“utf-8”></head><body><button id=“button”>单击</button></body></html>
作为Art这个伟大答案的包装，并使用OP最初要求的语法，这里有一个jQuery扩展，它可以记录在集合元素之外是否发生了单击。
$.fn.clickOutsideThisElement = function (callback) {
return this.each(function () {
var self = this;
$(document).click(function (e) {
if (!$(e.target).closest(self).length) {
callback.call(self, e)
}
})
});
};
然后你可以这样打电话：
$("#menuscontainer").clickOutsideThisElement(function() {
// handle menu toggle
});
这是小提琴演示
我不认为你真正需要的是当用户在外面点击时关闭菜单；您需要的是当用户单击页面上的任何位置时关闭菜单。如果你点击菜单，或者离开菜单，它应该会关闭吗？
发现上面没有令人满意的答案，促使我前几天写了这篇博文。对于更迂腐的人，有很多陷阱需要注意：
如果在单击时将单击事件处理程序附加到body元素，请确保在关闭菜单并解除事件绑定之前等待第二次单击。否则，打开菜单的单击事件将弹出到必须关闭菜单的侦听器。若在单击事件上使用event.stopProposition（），则页面中的其他元素都不能在任何位置单击以关闭功能。无限期地将click事件处理程序附加到body元素不是一个高性能的解决方案将事件的目标及其父级与处理程序的创建者进行比较时，假设您想要的是在单击关闭菜单时关闭菜单，而真正想要的是当您单击页面上的任何位置时关闭菜单。监听body元素上的事件会使代码更加脆弱。像这样无辜的风格会破坏它：body｛margin-left:auto；margin-right:auto；width:960px；｝
我在一些jQuery日历插件中找到了这个方法。
function ClickOutsideCheck(e)
{
var el = e.target;
var popup = $('.popup:visible')[0];
if (popup==undefined)
return true;
while (true){
if (el == popup ) {
return true;
} else if (el == document) {
$(".popup").hide();
return false;
} else {
el = $(el).parent()[0];
}
}
};
$(document).bind('mousedown.popup', ClickOutsideCheck);
要做到这一点，最广泛的方法是选择网页上的所有内容，除了不希望检测到点击的元素，并在打开菜单时绑定点击事件。
然后，当菜单关闭时，移除绑定。
使用.stopPropagation可防止事件影响菜单容器的任何部分。
$("*").not($("#menuscontainer")).bind("click.OutsideMenus", function ()
{
// hide the menus
//then remove all of the handlers
$("*").unbind(".OutsideMenus");
});
$("#menuscontainer").bind("click.OutsideMenus", function (event)
{
event.stopPropagation();
});
