如何检测元素外部的单击？

我有一些HTML菜单，当用户单击这些菜单的头部时，我会完全显示这些菜单。当用户在菜单区域外单击时，我希望隐藏这些元素。

jQuery是否可以实现这样的功能？

$("#menuscontainer").clickOutsideThisElement(function() {
    // Hide the menus
});

当前回答

如果有人好奇这里是javascript解决方案（es6）：

window.addEventListener('mouseup', e => {
        if (e.target != yourDiv && e.target.parentNode != yourDiv) {
            yourDiv.classList.remove('show-menu');
            //or yourDiv.style.display = 'none';
        }
    })

和es5，以防万一：

window.addEventListener('mouseup', function (e) {
if (e.target != yourDiv && e.target.parentNode != yourDiv) {
    yourDiv.classList.remove('show-menu'); 
    //or yourDiv.style.display = 'none';
}

});

2017-07-18 00:43:37

其他回答

现在有一个插件：外部事件（博客文章）

当clickoutside处理程序（WLOG）绑定到元素时，会发生以下情况：

元素被添加到一个数组中，该数组包含所有具有clickoutside处理程序的元素（名称空间）单击处理程序绑定到文档（如果尚未存在）在文档中的任何单击时，都会为该数组中不等于或不是单击事件目标的父级的元素触发单击外部事件此外，clickoutside事件的event.target设置为用户单击的元素（因此您甚至可以知道用户单击了什么，而不仅仅是他在外面单击了什么）

因此，不会阻止任何事件的传播，并且可以在元素的“上方”使用额外的单击处理程序和外部处理程序。

2010-04-05 10:07:36

$（'html'）.click（function（）{//隐藏菜单（如果可见）});$（'#menucontainer'）.click（函数（事件）{event.stopPropagation（）；});<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><html><button id=“#menucontainer”>确定</button></html>

2016-01-28 07:24:29

老实说，我不喜欢以前的任何解决方案。

要做到这一点，最好的方法是将“点击”事件绑定到文档，并比较该点击是否真的在元素之外（就像Art在建议中所说的那样）。

然而，您会遇到一些问题：您永远无法解除绑定，并且无法使用外部按钮打开/关闭该元素。

这就是为什么我编写了这个小插件（点击此处链接），以简化这些任务。能简单一点吗？

<a id='theButton' href="#">Toggle the menu</a><br/>
<div id='theMenu'>
    I should be toggled when the above menu is clicked,
    and hidden when user clicks outside.
</div>

<script>
$('#theButton').click(function(){
    $('#theMenu').slideDown();
});
$("#theMenu").dClickOutside({ ignoreList: $("#theButton") }, function(clickedObj){
    $(this).slideUp();
});
</script>

2012-11-25 20:29:12

这是面向未来观众的普通JavaScript解决方案。

单击文档中的任何元素时，如果已切换所单击元素的id，或者隐藏元素未隐藏且隐藏元素不包含所单击元素，则切换该元素。

(function () {
    "use strict";
    var hidden = document.getElementById('hidden');
    document.addEventListener('click', function (e) {
        if (e.target.id == 'toggle' || (hidden.style.display != 'none' && !hidden.contains(e.target))) hidden.style.display = hidden.style.display == 'none' ? 'block' : 'none';
    }, false);
})();

（函数（）{“使用严格”；var hidden=document.getElementById（'hidden'）；document.addEventListener（'click'，函数（e）{如果（e.target.id==“toggle”| |（hidden.style.display！=“none”&&！hidden.concloss（e.target）））hidden.syle.display=hidden.sstyle.display==“none？”block'：'无'；}，假）；})();<a href=“javascript:void（0）”id=“toggle”>切换隐藏潜水</a><div id=“hidden”style=“display:none；”>此内容通常是隐藏的。单击此内容以外的任何位置，使我消失</div>

如果您要在同一页面上进行多个切换，可以使用以下方式：

将隐藏的类名添加到可折叠项中。单击文档后，关闭所有不包含所单击元素且未隐藏的隐藏元素如果单击的元素是切换，请切换指定的元素。

（函数（）{“使用严格”；var hiddenItems=document.getElementsByClassName（'hidden'），隐藏；document.addEventListener（'click'，函数（e）{for（var i=0；hidden=hiddenItems[i]；i++）{如果（！hidden.contains（e.target）&&hidden.style.display！='无”）hidden.style.display=“无”；}if（e.target.getAttribute（'data-toggle'））{var toggle=document.querySelector（e.target.getAttribute（'data-toggle'））；toggle.style.display=toggle.style.display==“无”？'block'：'无'；}}，假）；})();<a href=“javascript:void（0）”data toggle=“#hidden1”>切换隐藏潜水</a><div class=“hidden”id=“hidden1”style=“display:none；”data hidden=“true”>此内容通常隐藏</div><a href=“javascript:void（0）”data toggle=“#hidden2”>切换隐藏潜水</a><div class=“hidden”id=“hidden2”style=“display:none；”data hidden=“true”>此内容通常隐藏</div><a href=“javascript:void（0）”data toggle=“#hidden3”>切换隐藏潜水</a><div class=“hidden”id=“hidden3”style=“display:none；”data hidden=“true”>此内容通常隐藏</div>

2015-05-19 22:52:49

尝试以下代码：

if ($(event.target).parents().index($('#searchFormEdit')) == -1 &&
    $(event.target).parents().index($('.DynarchCalendar-topCont')) == -1 &&
    (_x < os.left || _x > (os.left + 570) || _y < os.top || _y > (os.top + 155)) &&
    isShowEditForm) {

    setVisibleEditForm(false);
}

2014-02-17 10:32:08

如何检测元素外部的单击？

推荐文章

最新文章

标签