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

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

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

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

当前回答

作为一种变体：

var $menu = $('#menucontainer');
$(document).on('click', function (e) {

    // If element is opened and click target is outside it, hide it
    if ($menu.is(':visible') && !$menu.is(e.target) && !$menu.has(e.target).length) {
        $menu.hide();
    }
});

它在停止事件传播方面没有问题，并且更好地支持同一页面上的多个菜单，其中当第一个菜单打开时，单击第二个菜单将使stopPropagation解决方案中的第一个菜单保持打开状态。

2014-07-24 09:41:53

其他回答

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

$(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

这对我来说非常及时：

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

2010-06-02 19:15:33

这里的其他解决方案不适合我，所以我不得不使用：

if(!$(event.target).is('#foo'))
{
    // hide menu
}

编辑：普通Javascript变体（2021-03-31）

我使用这个方法来处理在单击下拉菜单外部时关闭下拉菜单的问题。

首先，我为组件的所有元素创建了一个自定义类名。这个类名将被添加到组成菜单小部件的所有元素中。

const className = `dropdown-${Date.now()}-${Math.random() * 100}`;

我创建了一个函数来检查单击和单击元素的类名。如果clicked元素不包含我上面生成的自定义类名，它应该将show标志设置为false，菜单将关闭。

const onClickOutside = (e) => {
  if (!e.target.className.includes(className)) {
    show = false;
  }
};

然后，我将单击处理程序附加到窗口对象。

// add when widget loads
window.addEventListener("click", onClickOutside);

……最后还有一些家政服务

// remove listener when destroying the widget
window.removeEventListener("click", onClickOutside);

2009-07-06 23:10:07

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

标准HTML：

用＜标签＞包围菜单并获取焦点状态更改。

http://jsfiddle.net/bK3gL/

另外：您可以通过Tab展开菜单。

2014-06-10 12:56:17

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

推荐文章

最新文章

标签