关于javascript：如何检测元素外部的单击？

How do I detect a click outside an element?

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

jquery是否可以这样做？

1
2
3

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

NOTE: Using stopEventPropagation() is something that should be avoided as it breaks normal event flow in the DOM. See this article for more information. Consider using this method instead

将单击事件附加到关闭窗口的文档正文。将一个单独的单击事件附加到容器，该容器将停止向文档正文传播。

1
2
3
4
5
6
7

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

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

相关讨论

我更喜欢将文档绑定到单击事件，然后在需要时取消绑定事件。效率更高。
这打破了包含在menucontainer中的许多事物的标准行为，包括按钮和链接。我很惊讶这个答案如此受欢迎。
我已经发布了另一个解决方案，它不会破坏行为stackoverflow.com/questions/152975/&hellip；
这不会破坏menucontainer内的任何内容的行为，因为它位于其内任何内容传播链的底部。
它非常漂亮，但你应该使用$('html').click()而不是身体。主体总是有其内容的高度。它没有太多的内容或屏幕很高，它只对身体填充的部分起作用。
MeO＋1。应该是HTML而不是正文。水平空间的参数相同；如果页面有流动的页边距，并且监视器比内容宽，则如果使用body，则单击区域外时菜单不会隐藏。
@Medo应该是$(document)。
@ART对此的一个简单的解决方法是停止传播包含菜单内容的包装器DIV。
@用户751564我们该怎么做？在menucontainer中嵌套另一个包含内容的DIV？
埃文，塞尔吉奥，乔，艺术，梅奥，和其他人(+Joel&Jeff)，我爱你们所有人。我花了一天的时间才最终意识到这一点。在这种情况下，停止保护。
嗯，事实上，我使用了Art的解决方案，因为我不想在第一个菜单打开时，有人单击第二个菜单时停止传播。
我也很惊讶这个解决方案获得了如此多的选票。对于stoppropagation jsfidle.net/flandre/vanfw/3之外的任何元素，此操作都将失败。
stackoverflow.com/a/12920446/470159我回答了一个类似的问题，我觉得这是一个很好的解决方案
如何从HTML中的链接显示它？
如果从单击事件(如按钮或链接)显示菜单，则"打开菜单"单击事件处理程序也应调用event.stopPropagation()。
很好的解决方案，小巧轻便。但是…不考虑套印格式，如日期选择器、弹出窗口等。在我看来，像这样的元素不应该触发隐藏。我为这个问题添加了一个答案，解决了这个问题。
如果使用此技术的页面上有多个菜单，则不起作用。单击任一菜单将停止关闭所有其他菜单。
我不能说我很惊讶这个答案得到这么多的赞成票，它在很多情况下都有效。但这不是解决这个问题的最佳方案！就我个人而言，我喜欢在函数范围内传递函数：stackoverflow.com/questions/152975/&hellip；stackoverflow.com/a/7385673/986862
stackoverflow.com/questions/1403615/&hellip；按照@andr&233；Figueiredo的指示完成此答案：
Philip Walton很好地解释了为什么这个答案不是最好的解决方案：css-tricks.com/dangers-stopping-event-propagation
我不赞成这个，因为这不是我们应该使用的解决方案。这是危险的，因为它有深远的后果。正如汤姆在上面的评论中指出的那样，在css-tricks.org上有一篇非常深入的文章，关于为什么这个答案是好的。
这个解决方案破坏了我代码的其他部分。对不起，我得投反对票。我也很惊讶这这么受欢迎。
这种解决方案通常很糟糕，而且存在维护风险。基本上只是一个有时会发生的黑客。
这个答案打破了许多标准行为。它应该被贬低！
我认为这在页面性能上是危险的，这篇文章的详细内容是：css-tricks.com/dangers-stopping-event-propagation
这里有一个很好的解释为什么不使用event.stopPropagation()css-tricks.com/dangers-stopping-event-propagation
尽量使用event.path。这里有一个答案：http://stackoverflow.com/questions/152975/how-do-i-detect-a-&zwnj；&8203；单击ele&zwnj；&8203；ment/43405204&zwnj；&8203；04
遗憾的是，我使用了一个模式插件，它使用这种方法令人震惊地允许在模式外单击来关闭它，并且花了很长时间才发现为什么我不能将事件委托给模式内的任何内容！！我更改了插件的代码，改为使用：$(document).on('click', function(e) { if (!$(e.target).closest('.modal').length && !$(e.target).is('.modal')) modal.close(); });，这是一个更好的解决方案。
我会说，：不要使用click事件，而是使用mouseup事件，这是其他逻辑使用较少的事件。
只有这个解决方案对我有效。下面这些"更好的"都没有。非常感谢你。

您可以监听document上的单击事件，然后使用.closest()确保#menucontainer不是被单击元素的祖先或目标。

如果不是，则单击的元素在#menucontainer之外，您可以安全地隐藏它。

1
2
3
4
5
6
7

$(document).click(function(event) {
$target = $(event.target);
if(!$target.closest('#menucontainer').length &&
$('#menucontainer').is(":visible")) {
$('#menucontainer').hide();
}
});

编辑：2017-06-23

如果计划关闭菜单并希望停止侦听事件，也可以在事件侦听器之后进行清理。此函数将只清理新创建的侦听器，保留document上的任何其他单击侦听器。使用ES2015语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

export function hideOnClickOutside(selector) {
const outsideClickListener = (event) => {
$target = $(event.target);
if (!$target.closest(selector).length && $(selector).is(':visible')) {
$(selector).hide();
removeClickListener();
}
}

const removeClickListener = () => {
document.removeEventListener('click', outsideClickListener)
}

document.addEventListener('click', outsideClickListener)
}

编辑：2018-03-11

对于那些不想使用jquery的用户。上面的代码是普通的vanillajs(ecmascript6)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function hideOnClickOutside(element) {
const outsideClickListener = event => {
if (!element.contains(event.target) && isVisible(element)) { // or use: event.target.closest(selector) === null
element.style.display = 'none'
removeClickListener()
}
}

const removeClickListener = () => {
document.removeEventListener('click', outsideClickListener)
}

document.addEventListener('click', outsideClickListener)
}

const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length ) // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js

注：这是基于alex comment，只使用!element.contains(event.target)而不是jquery部分。

但是现在所有主要的浏览器都可以使用element.closest()(w3c版本与jquery版本稍有不同)。polyfill可以在这里找到：https://developer.mozilla.org/en-us/docs/web/api/element/closest

相关讨论

虽然您的方法也可以工作，但您的声明是完全错误的。#menucontainer是传播链中包含的所有元素的底层，因此它不会更改任何行为。你应该自己试试看。
我试过许多其他的答案，但只有这一个有效。谢谢。我最后使用的代码是：$(document).click(function(event)if($(event.target).closest('.window').length==0)$('.window').fadeout('fast')；)；
我最终选择了这个解决方案，因为它更好地支持同一页面上的多个菜单，在第一个菜单打开时单击第二个菜单将使第一个菜单在Stoppropagation解决方案中保持打开状态。
对于页面上的多个项目，这是一个非常好的解决方案。
回答得很好。这是当您有多个要关闭的项目时的方法。
这应该是公认的答案，因为其他解决方案具有event.stoppropagation()的缺陷。
这应该是公认的答案，有关更详细的答案，请参阅本页：css-tricks.com/dangers-stopping-event-propagation
as variant:var$menu=$('menucontainer')；$(document).on('click'，function(e)//如果打开元素并单击目标在其外部，//如果($menu.is(':visible')&；&；，则关闭它！$menu.is(e.target)&；！$menu.has(e.target.length)$menu.hide())；
这是一个比使用$('html').stoppropagation()更好的解决方案，因为它们很可能会干扰网站其他部分的功能。我希望有人能把这个作为答案。
单线示例-!$(e.target).closest('.menu').length && $('.menu').is(":visible") && $('.menu').hide();。
为什么没有正文检查标记名EDOCX1[4]
closest不适用于动态加载的元素(比如主干加载的项目。Marionettejs的CollectionView)。
当页面上只有一个元素时，这对我不起作用。如果我在页面上有多个元素，它就可以正常工作。
更好的是，特别是对于那些劫持内部链接行为以供HTML5历史API使用的Web应用程序。(所以，所有人)
没有使用node.contains()的jquery-!element.contains(event.target)。
在我看来，这绝对是最好的选择。如果您想要隐藏的DIV中有一些内容是可更改的，那么停止事件传播是非常麻烦的。
我这样说：$(event.target).closest('#menucontainer').size() == 0。
对于响应式设计，而不是像这样点击使用：$(document).on('touchStart click'，function(event)…
不过，这很有效，有时$(event.target)作为空字符串出现…你知道为什么吗？我每次都点击同一个目标。
".closest()方法在进入DOM树之前，首先使用元素本身进行搜索"-api.jquery.com/closest。因此应该可以删除`&；！$(event.target).is("menucontainer")`。
我有两个文档单击事件，因为当单击它们外部时，需要分别关闭两个容器。这实际上给了我一些问题，因为单击链接打开第二个容器不会关闭第一个容器，反之亦然。但分开来看，他们工作得很好。修复结果是mouseup事件，而不是文档上的click事件。
这似乎有效，但不适用于手机，可以确认吗？
我同意@bj&rn stenfeldt。使用.closest()时不需要!$(event.target).is('#menucontainer')部件
很好的解决方案，效果很好。我刚刚将$('menucontainer').hide()；部分调整为$('menucontainer').removeClass('showmenu')，以使用我的"所有产品"菜单。
我之所以推广它是因为它有!$(event.target).closest('#element').length检查，这正是我在自己的应用程序中所需要的。
这是一个完美的解决方案——它可以在不破坏容器内其他元素的情况下完成所需的工作。我遇到了一个问题，Ajax链接没有使用stoppropagation()。
真是魅力四射！我使用了.parents()而不是.closest()，因为我的元素内部有多个级别。
有人让它在移动设备上工作吗？
如果希望将此函数限制为仅检测单击，而不对其执行操作，则可以将整个函数包装在一个promise中，删除隐藏元素，并在调用removeEventListener后解析该promise。可以使用.then(…)检测从调用此函数的位置单击的情况。更好的封装，在源代码中更清楚发生了什么。
感谢您的解决方案。效果很好。但我注意到，当我在另一个单击事件中添加这个处理程序时——在事件冒泡阶段调用侦听器。为了解决这个问题，我提出了类似于setTimeout((x)=>{ document.addEventListener('click', outsideClickListener);},1);的解决方案。

How to detect a click outside an element?

原因，这个问题是如此的流行，有这么多的答案是，它是deceptively复杂。八年后，几乎和dozens奇怪的答案，我是真正的看到如何护理已被给定的accessibility大小。

I would like to hide these elements when the user clicks outside the menus' area.

这是一个崇高的事业，是实际的问题。标题的问题与答案的表示，这是他最大的attempt出现大的地址与您的安全unfortunate包含Red Herring。

hint的话：这是"点击"！

你不真的想要handlers bind点击。

如果你是大的dialog handlers结合点击关闭，你已经已经失败。你已经失败的原因是，并非每个triggers click事件。用户不使用一个大鼠能将你的dialog Escape(和你的arguably流行起来的菜单是A型dialog)由压tab，和然后他们不会是能读的内容背后的一个dialog无subsequently triggering click事件。

所以让我们rephrase这个问题。

How does one close a dialog when a user is finished with it?

这是目标。不幸的是，现在我们需要的userisfinishedwiththedialogbind结合事件，那不是straightforward相比。

所以，我们如何可以detect用户使用一个dialog已完成？

focusout事件

一个很好的开始，如果焦点是确定的dialog已经离开了。

小心：是blurhint的事件，如果不blurpropagate的事件是bubbling绑定的阶段！

jquery focusout会做的只是罚款。如果你不能使用，你可以使用jquery，然后在blur地捕获阶段：

1 2	element.addEventListener('blur', ..., true); // use capture: ^^^^

同时，对于许多对话框允许你会需要大的容器获得焦点。添加到允许的dialog tabindex="-1"大无焦点的receive dynamically否则interrupting tabbing流。

1
2
3
4
5
6
7

$('a').on('click', function () {
$(this.hash).toggleClass('active').focus();
});

$('div').on('focusout', function () {
$(this).removeClass('active');
});

1
2
3
4
5
6

div {
display: none;
}
.active {
display: block;
}

1
2
3
4

如果你的游戏与演示为超过一分钟，你应该很快开始看到的问题。

第一个是，该链接在dialog不是clickable。在试图点击它或它会导致大的标签的dialog closing之前的相互作用需要的地方。这是因为一个关于元素的内在triggers focusout事件之前triggering一focusin事件再次。

是queue修复的状态变化对该事件的环。这不能做为setImmediate(...)由使用，或setTimeout(..., 0)browsers setImmediate，不支持。它可以一次queued cancelled随后由一个focusin：

1
2
3
4
5
6
7
8
9
10

$('.submenu').on({
focusout: function (e) {
$(this).data('submenuTimer', setTimeout(function () {
$(this).removeClass('submenu--active');
}.bind(this), 0));
},
focusin: function (e) {
clearTimeout($(this).data('submenuTimer'));
}
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

1
2
3
4
5
6

div {
display: none;
}
.active {
display: block;
}

1
2
3
4

第二期是不会关闭的dialog当的链接是pressed再次。这是因为dialog失去焦点，triggering关闭后的行为，其中的链接点击triggers dialog reopen的大。

类似的前一期的焦点，成为管理国家的需要。给定的状态变化，已经被queued，它只是一个重要的焦点事件的处理：对dialog triggers

<字幕>这个要看<字幕> /熟悉

1
2
3
4
5
6
7
8
9
10

$('a').on({
focusout: function () {
$(this.hash).data('timer', setTimeout(function () {
$(this.hash).removeClass('active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this.hash).data('timer'));
}
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

$('a').on('click', function () {
$(this.hash).toggleClass('active').focus();
});

$('div').on({
focusout: function () {
$(this).data('timer', setTimeout(function () {
$(this).removeClass('active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this).data('timer'));
}
});

$('a').on({
focusout: function () {
$(this.hash).data('timer', setTimeout(function () {
$(this.hash).removeClass('active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this.hash).data('timer'));
}
});

1
2
3
4
5
6

div {
display: none;
}
.active {
display: block;
}

1
2
3
4

esc关键

如果你以为你是做焦点由美国来处理，你可以有更大的自由simplify的用户体验。

这往往是一个"很有"的特征，但它是常见的，当你有一个popup模态或任何你的关键，esc将接近它了。

1
2
3
4
5
6

keydown: function (e) {
if (e.which === 27) {
$(this).removeClass('active');
e.preventDefault();
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

$('a').on('click', function () {
$(this.hash).toggleClass('active').focus();
});

$('div').on({
focusout: function () {
$(this).data('timer', setTimeout(function () {
$(this).removeClass('active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this).data('timer'));
},
keydown: function (e) {
if (e.which === 27) {
$(this).removeClass('active');
e.preventDefault();
}
}
});

$('a').on({
focusout: function () {
$(this.hash).data('timer', setTimeout(function () {
$(this.hash).removeClass('active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this.hash).data('timer'));
}
});

1
2
3
4
5
6

div {
display: none;
}
.active {
display: block;
}

1
2
3
4

如果你知道你有focusable元素内的dialog，你不会需要dialog焦点的直接测量。如果你是，你可以建立一个菜单，菜单的第一项相反的焦点。

1
2
3
4
5
6
7

click: function (e) {
$(this.hash)
.toggleClass('submenu--active')
.find('a:first')
.focus();
e.preventDefault();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

$('.menu__link').on({
click: function (e) {
$(this.hash)
.toggleClass('submenu--active')
.find('a:first')
.focus();
e.preventDefault();
},
focusout: function () {
$(this.hash).data('submenuTimer', setTimeout(function () {
$(this.hash).removeClass('submenu--active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this.hash).data('submenuTimer'));
}
});

$('.submenu').on({
focusout: function () {
$(this).data('submenuTimer', setTimeout(function () {
$(this).removeClass('submenu--active');
}.bind(this), 0));
},
focusin: function () {
clearTimeout($(this).data('submenuTimer'));
},
keydown: function (e) {
if (e.which === 27) {
$(this).removeClass('submenu--active');
e.preventDefault();
}
}
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

.menu {
list-style: none;
margin: 0;
padding: 0;
}
.menu:after {
clear: both;
content: '';
display: table;
}
.menu__item {
float: left;
position: relative;
}

.menu__link {
background-color: lightblue;
color: black;
display: block;
padding: 0.5em 1em;
text-decoration: none;
}
.menu__link:hover,
.menu__link:focus {
background-color: black;
color: lightblue;
}

.submenu {
border: 1px solid black;
display: none;
left: 0;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
}
.submenu--active {
display: block;
}

.submenu__item {
width: 150px;
}

.submenu__link {
background-color: lightblue;
color: black;
display: block;
padding: 0.5em 1em;
text-decoration: none;
}

.submenu__link:hover,
.submenu__link:focus {
background-color: black;
color: lightblue;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

威-咏叹调的角色和其他accessibility支持

这个回答hopefully分布式访问的键盘和鼠的基础支持这一功能，但因为它的已经相当sizable我要讨论任何avoid威-咏叹调的角色和属性，然而，我指的implementers高度recommend将军为细节的角色在什么他们应该使用和其他任何合适的属性。

相关讨论

这是最完整的答案，考虑到解释和可访问性。我认为这应该是被接受的答案，因为大多数其他答案只处理点击，只是代码片段被丢弃，没有任何解释。
@西里尔，谢谢你的好意。如果你感到如此强烈，你就必须说服行动党改变公认的答案。
太棒了，解释得很好。我只是在一个反应组件上使用了这种方法，并且工作得很好谢谢
@ZZZZBOV感谢您的深入回答，我正试图用普通的JS实现它，我对所有jquery的东西都有点迷茫。香草JS有什么相似之处吗？
@卡勒，你得问一个更具体的问题。jquery是用普通的JS编写的，因此在这方面：是的，没有jquery绝对有实现这一点的方法。我无法想象这个答案对你有任何帮助。如果你在找我给你写一个jquery的免费版本，那么我必须提前拒绝。
@不，我不是在找你写一个jquery的免费版本，当然，我会尽力去做，我想最好是问一个新的问题，如果我真的卡住了。再次感谢。
我想添加一个边缘案例，阻止这对我工作，人们应该知道。我正在创建一个用于身份验证功能(如登录和注册)的弹出窗口。我也恰好是一个狂热的1password用户。当我单击"登录"时，1密码扩展名出现，询问我是否要保存凭据。这意味着弹出窗口在相关的Focusin/Out事件被触发时关闭。在我的设置中，我注意到，以其他方式获得焦点的元素总是body，因此我将逻辑包装在activeElement.tagName === 'BODY'的检查中。我想我能做的最好
虽然这是检测点击出自定义下拉列表或其他输入的一个很好的方法，但它不应该是模态或弹出窗口的首选方法，原因有两个。当用户切换到另一个选项卡或窗口，或打开上下文菜单时，模式将关闭，这真的很烦人。此外，"click"事件在鼠标向上时触发，而"focusout"事件在您按下鼠标时触发。通常，一个按钮只执行一个动作，如果你按下鼠标按钮然后放开。对于模态来说，正确的、可访问的方法是添加一个可选项卡的关闭按钮。
@Kevin，"当用户切换到另一个选项卡或窗口，或者打开一个上下文菜单"时，模式将关闭，这些事件可用于处理这些情况。"这真的很烦人。"我觉得情态通常很烦人，几乎不值得麻烦。"单击"事件在鼠标向上移动时触发……通常情况下，一个按钮只在按下鼠标按钮然后放开时执行一个操作。"我同意这个解决方案不会在技术上等待单击，因此它无法通过拖动操作取消"单击"。在实践中，我没有看到它会带来问题。
@Kevin，"对于模态来说，正确的、可访问的方法是添加一个可选项卡的关闭按钮。"我完全同意大多数模态应该有一个关闭按钮。在某些情况下，关闭按钮不实用。我主要使用这种技术来创建链接下拉列表，通常不需要专用的关闭按钮，这与