我有一些HTML菜单,当用户单击这些菜单的头部时,我会完全显示这些菜单。当用户在菜单区域外单击时,我希望隐藏这些元素。
jQuery是否可以实现这样的功能?
$("#menuscontainer").clickOutsideThisElement(function() {
// Hide the menus
});
我有一些HTML菜单,当用户单击这些菜单的头部时,我会完全显示这些菜单。当用户在菜单区域外单击时,我希望隐藏这些元素。
jQuery是否可以实现这样的功能?
$("#menuscontainer").clickOutsideThisElement(function() {
// Hide the menus
});
当前回答
正如另一位海报所说,有很多陷阱,特别是如果你正在显示的元素(在本例中是菜单)具有交互元素。我发现以下方法相当稳健:
$('#menuscontainer').click(function(event) {
//your code that shows the menus fully
//now set up an event listener so that clicking anywhere outside will close the menu
$('html').click(function(event) {
//check up the tree of the click target to check whether user has clicked outside of menu
if ($(event.target).parents('#menuscontainer').length==0) {
// your code to hide menu
//this event listener has done its job so we can unbind it.
$(this).unbind(event);
}
})
});
其他回答
这种情况的简单解决方案是:
$(document).mouseup(function (e)
{
var container = $("YOUR SELECTOR"); // Give you class or ID
if (!container.is(e.target) && // If the target of the click is not the desired div or section
container.has(e.target).length === 0) // ... nor a descendant-child of the container
{
container.hide();
}
});
如果在div单击事件之外触发,上述脚本将隐藏div。
$('#menucontainer').click(function(e){
e.stopPropagation();
});
$(document).on('click', function(e){
// code
});
对于那些希望将一个简短的解决方案集成到JS代码中的人来说——一个没有JQuery的小型库:
用法:
// demo code
var htmlElem = document.getElementById('my-element')
function doSomething(){ console.log('outside click') }
// use the lib
var removeListener = new elemOutsideClickListener(htmlElem, doSomething);
// deregister on your wished event
$scope.$on('$destroy', removeListener);
下面是库:
function elemOutsideClickListener (element, outsideClickFunc, insideClickFunc) {
function onClickOutside (e) {
var targetEl = e.target; // clicked element
do {
// click inside
if (targetEl === element) {
if (insideClickFunc) insideClickFunc();
return;
// Go up the DOM
} else {
targetEl = targetEl.parentNode;
}
} while (targetEl);
// click outside
if (!targetEl && outsideClickFunc) outsideClickFunc();
}
window.addEventListener('click', onClickOutside);
return function () {
window.removeEventListener('click', onClickOutside);
};
}
我从这里获取代码并将其放在函数中:https://www.w3docs.com/snippets/javascript/how-to-detect-a-click-outside-an-element.html
我认为最好的方法是这样做。
$(document).on("click", function(event) {
clickedtarget = $(event.target).closest('#menuscontainer');
$("#menuscontainer").not(clickedtarget).hide();
});
这种类型的解决方案很容易适用于多个菜单以及通过javascript动态添加的菜单。基本上,它只允许您单击文档中的任何位置,并检查您单击的元素,并选择最接近的“#菜单容器”。然后它会隐藏所有菜单容器,但不包括您单击的菜单容器。
不确定菜单是如何构建的,但可以在JSFiddle中复制我的代码。这是一个非常简单但功能全面的菜单/模式系统。您需要做的就是构建html菜单,代码将为您完成这项工作。
https://jsfiddle.net/zs6anrn7/
这里有一个纯javascript的简单解决方案。它是ES6的最新版本:
var isMenuClick = false;
var menu = document.getElementById('menuscontainer');
document.addEventListener('click',()=>{
if(!isMenuClick){
//Hide the menu here
}
//Reset isMenuClick
isMenuClick = false;
})
menu.addEventListener('click',()=>{
isMenuClick = true;
})