我有一些HTML菜单，当用户单击这些菜单的头部时，我会完全显示这些菜单。当用户在菜单区域外单击时，我希望隐藏这些元素。
jQuery是否可以实现这样的功能？
$("#menuscontainer").clickOutsideThisElement(function() {
// Hide the menus
});
当前回答
我很惊讶没有人真正承认这一事件：
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>
其他回答
这对我来说非常及时：
$('body').click(function() {
// Hide the menus if visible.
});
这应该是有效的：
$('body').click(function (event) {
var obj = $(event.target);
obj = obj['context']; // context : clicked element inside body
if ($(obj).attr('id') != "menuscontainer" && $('#menuscontainer').is(':visible') == true) {
//hide menu
}
});
检查窗口单击事件目标（它应该传播到窗口，只要它没有在其他地方被捕获），并确保它不是任何菜单元素。如果不是，那么你就在菜单之外。
或者检查单击的位置，看看它是否包含在菜单区域中。
注意：应该避免使用stopPropagation，因为它会破坏DOM中的正常事件流。有关更多信息，请参阅这篇CSS技巧文章。请考虑改用此方法。
将单击事件附加到关闭窗口的文档正文。将一个单独的单击事件附加到容器，以停止传播到文档正文。
$(window).click(function() {
//Hide the menus if visible
});
$('#menucontainer').click(function(event){
event.stopPropagation();
});
功能：
$(function() {
$.fn.click_inout = function(clickin_handler, clickout_handler) {
var item = this;
var is_me = false;
item.click(function(event) {
clickin_handler(event);
is_me = true;
});
$(document).click(function(event) {
if (is_me) {
is_me = false;
} else {
clickout_handler(event);
}
});
return this;
}
});
用法：
this.input = $('<input>')
.click_inout(
function(event) { me.ShowTree(event); },
function() { me.Hide(); }
)
.appendTo(this.node);
功能非常简单：
ShowTree: function(event) {
this.data_span.show();
}
Hide: function() {
this.data_span.hide();
}
