检测点击外部元素
如何检测元素外部的点击？我正在使用Vue.js，因此它将不在我的模板元素之外。我知道如何在Vanilla
JS中做到这一点，但是当我使用Vue.js时，我不确定是否有更合适的方法来做到这一点？
我想我可以使用更好的方法来访问元素？
问题答案：
只需设置一次自定义指令即可很好地解决：
Vue.directive('click-outside', {
bind () {
this.event = event => this.vm.$emit(this.expression, event)
this.el.addEventListener('click', this.stopProp)
document.body.addEventListener('click', this.event)
},
unbind() {
this.el.removeEventListener('click', this.stopProp)
document.body.removeEventListener('click', this.event)
},
stopProp(event) { event.stopPropagation() }
})
用法：
<div v-click-outside="nameOfCustomEventToCall">
Some content
</div>
在组件中：
events: {
nameOfCustomEventToCall: function (event) {
// do something - probably hide the dropdown menu / modal etc.
}
}
-
问题内容： 我有一些HTML菜单，当用户单击这些菜单的标题时，它们会完整显示。当用户在菜单区域之外单击时，我想隐藏这些元素。 jQuery可能会发生这种情况吗？ 问题答案： 注意：应该避免使用，因为它会破坏DOM中的正常事件流。有关更多信息，请参见本文。考虑使用这种方法，而不是 将单击事件附加到关闭窗口的文档主体。将单独的click事件附加到容器，以停止传播到文档主体。
-
问题内容： 我有一些HTML菜单，当用户单击这些菜单的标题时，它们会完整显示。当用户在菜单区域之外单击时，我想隐藏这些元素。 jQuery可能会发生这种情况吗？ 问题答案： 注意：应该避免使用，因为它会破坏DOM中的正常事件流。有关更多信息， propagation/)。考虑使用这种方法，而不是 将单击事件附加到关闭窗口的文档主体。将单独的click事件附加到容器，以停止传播到文档主体。
-
问题内容： 我正在寻找一种检测点击事件是否在组件外部发生的方法。jQuery最近的（）用于查看click事件中的目标是否具有dom元素作为其父元素之一。如果存在匹配项，则单击事件属于子项之一，因此不被视为在组件之外。 因此，在我的组件中，我想将单击处理程序附加到窗口。当处理程序触发时，我需要将目标与组件的dom子代进行比较。 click事件包含“path”之类的属性，该属性似乎包含事件经过的dom
-
问题内容： 我有一个id为“ content- area”的div，当用户在该div之外单击时，我想提醒他们他们在该div之外单击的事实。我将如何使用JavaScript解决此问题？ 问题答案： 用纯Javascript 看看这个小提琴，看看这就是你所追求的！
-
我从这个问题中找到了一个关于检测div外部点击的好答案：我如何检测元素外部的点击？，这工作得非常好。 但我注意到，在测试我的站点时，如果我点击元素外部，它在iPhone上不起作用。 下面是代码（直接取自该答案）
-
问题内容： 如何检测Angular中组件 外部 的点击？ 问题答案： import { Component, ElementRef, HostListener, Input } from ‘@angular/core’;