我有一些HTML菜单，当用户单击这些菜单的头部时，我会完全显示这些菜单。当用户在菜单区域外单击时，我希望隐藏这些元素。
jQuery是否可以实现这样的功能？
$("#menuscontainer").clickOutsideThisElement(function() {
// Hide the menus
});
当前回答
功能：
$(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();
}
其他回答
我认为最好的方法是这样做。
$(document).on("click", function(event) {
clickedtarget = $(event.target).closest('#menuscontainer');
$("#menuscontainer").not(clickedtarget).hide();
});
这种类型的解决方案很容易适用于多个菜单以及通过javascript动态添加的菜单。基本上，它只允许您单击文档中的任何位置，并检查您单击的元素，并选择最接近的“#菜单容器”。然后它会隐藏所有菜单容器，但不包括您单击的菜单容器。
不确定菜单是如何构建的，但可以在JSFiddle中复制我的代码。这是一个非常简单但功能全面的菜单/模式系统。您需要做的就是构建html菜单，代码将为您完成这项工作。
https://jsfiddle.net/zs6anrn7/
这是我解决问题的方法。
$(window).click(function (event) {
//To improve performance add a checklike
//if(myElement.isClosed) return;
var isClickedElementChildOfMyBox = isChildOfElement(event,'#id-of-my-element');
if (isClickedElementChildOfMyBox)
return;
//your code to hide the element
});
var isChildOfElement = function (event, selector) {
if (event.originalEvent.path) {
return event.originalEvent.path[0].closest(selector) !== null;
}
return event.originalEvent.originalTarget.closest(selector) !== null;
}
这是一个容器或整个文档中的解决方案。若click目标在元素之外（类为“yourClass”），则元素被隐藏。
$('yourContainer').on('click', function(e) {
if (!$(e.target).hasClass('yourClass')) {
$('.yourClass').hide();
}
});
假设您想要检测用户在外部或内部单击的div是否具有id，例如：“我的特殊小部件”。
收听身体点击事件：
document.body.addEventListener('click', (e) => {
if (isInsideMySpecialWidget(e.target, "my-special-widget")) {
console.log("user clicked INSIDE the widget");
}
console.log("user clicked OUTSIDE the widget");
});
function isInsideMySpecialWidget(elem, mySpecialWidgetId){
while (elem.parentElement) {
if (elem.id === mySpecialWidgetId) {
return true;
}
elem = elem.parentElement;
}
return false;
}
在这种情况下，您不会破坏页面中某些元素的正常点击流，因为您没有使用“stopPropagation”方法。
最简单的方法：mouseleave（function（））
更多信息：https://www.w3schools.com/jquery/jquery_events.asp
