如何检测元素外部的单击？
如何检测元素外部的单击？
提问于 2008-09-30 21:17:12
我有一些HTML菜单，当用户单击这些菜单的头部时，我会完全显示这些菜单。当用户在菜单区域之外单击时，我想隐藏这些元素。
这样的事情在jQuery中是可能的吗？
$("#menuscontainer").clickOutsideThisElement(function() {
// Hide the menus
});回答 70
Stack Overflow用户
发布于 2009-07-06 23:10:07
这里的其他解决方案对我不起作用，所以我不得不使用：
if(!$(event.target).is('#foo'))
{
// hide menu
}编辑:普通Javascript变体(2021-03-31)
我使用此方法来处理单击外部时关闭下拉菜单的问题。
首先，我为组件的所有元素创建了一个自定义类名。这个类名将被添加到组成菜单小部件的所有元素中。
const className = `dropdown-${Date.now()}-${Math.random() * 100}`;我创建了一个函数来检查点击和被点击元素的类名。如果单击的元素不包含我在上面生成的自定义类名，它应该将show标志设置为false，菜单将关闭。
const onClickOutside = (e) => {
if (!e.target.className.includes(className)) {
show = false;
}
};然后，我将click处理程序附加到window对象。
// add when widget loads
window.addEventListener("click", onClickOutside);..。最后是一些家务活
// remove listener when destroying the widget
window.removeEventListener("click", onClickOutside);Stack Overflow用户
发布于 2008-09-30 18:13:40
我有一个应用程序，它的工作方式类似于Eran的示例，除了我在打开菜单时将click事件附加到主体...有点像这样：
$('#menucontainer').click(function(event) {
$('html').one('click',function() {
// Hide the menus
});
event.stopPropagation();
});有关jQuery's one() function的更多信息
Stack Overflow用户
发布于 2015-11-02 16:33:34
经过研究，我找到了三个可行的解决方案(我忘记了页面链接以供参考)
第一个解决方案
<script>
//The good thing about this solution is it doesn't stop event propagation.
var clickFlag = 0;
$('body').on('click', function () {
if(clickFlag == 0) {
console.log('hide element here');
/* Hide element here */
}
else {
clickFlag=0;
}
});
$('body').on('click','#testDiv', function (event) {
clickFlag = 1;
console.log('showed the element');
/* Show the element */
});
</script>第二种解决方案
<script>
$('body').on('click', function(e) {
if($(e.target).closest('#testDiv').length == 0) {
/* Hide dropdown here */
}
});
</script>第三种解决方案
<script>
var specifiedElement = document.getElementById('testDiv');
document.addEventListener('click', function(event) {
var isClickInside = specifiedElement.contains(event.target);
if (isClickInside) {
console.log('You clicked inside')
}
else {
console.log('You clicked outside')
}
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/152975
复制相关文章
相似问题