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

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

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

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

当前回答

使用流中断、模糊/聚焦事件或任何其他棘手的技术，只需将事件流与元素的亲属关系匹配即可：

$(document).on("click.menu-outside", function(event){
    // Test if target and it's parent aren't #menuscontainer
    // That means the click event occur on other branch of document tree
    if(!$(event.target).parents().andSelf().is("#menuscontainer")){
        // Click outisde #menuscontainer
        // Hide the menus (but test if menus aren't already hidden)
    }
});

要删除事件侦听器外部的单击，只需执行以下操作：

$(document).off("click.menu-outside");

2013-06-05 15:05:20

其他回答

 <div class="feedbackCont" onblur="hidefeedback();">
        <div class="feedbackb" onclick="showfeedback();" ></div>
        <div class="feedbackhide" tabindex="1"> </div>
 </div>

function hidefeedback(){
    $j(".feedbackhide").hide();
}

function showfeedback(){
    $j(".feedbackhide").show();
    $j(".feedbackCont").attr("tabindex",1).focus();
}

这是我想出的最简单的解决方案。

2013-02-19 21:11:50

$（'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

当只有一个元素需要管理时，这里的解决方案工作得很好。然而，如果有多个元素，问题就复杂得多。e.stopPropagation（）的技巧和其他所有技巧都不起作用。

我想出了一个解决方案，也许不是那么容易，但总比什么都没有好。看看：

$view.on("click", function(e) {

    if(model.isActivated()) return;

        var watchUnclick = function() {
            rootView.one("mouseleave", function() {
                $(document).one("click", function() {
                    model.deactivate();
                });
                rootView.one("mouseenter", function() {
                    watchUnclick();
                });
            });
        };
        watchUnclick();
        model.activate();
    });

2013-05-31 17:49:31

只是一个警告，使用这个：

$('html').click(function() {
  // Hide the menus if visible
});

$('#menucontainer').click(function(event){
  event.stopPropagation();
});

它阻止RubyonRails UJS驱动程序正常工作。例如，link_to“click”、“/url”、：method=>：delete将不起作用。

这可能是一种变通方法：

$('html').click(function() {
  // Hide the menus if visible
});

$('#menucontainer').click(function(event){
  if (!$(event.target).data('method')) {
    event.stopPropagation();
  }
});

2012-12-14 10:55:14

这是面向未来观众的普通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

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

推荐文章

最新文章

标签