我怎样才能检测到元素外的点击？我在用Vue.所以它将超出我的模板元素.我知道如何在Vanilla JS中做到这一点，但我不确定在使用Vue时是否有更合适的方法.js？
这是香草JS:Javascript Detect Click event outside of div的解决方案
我想我可以用更好的方式访问元素？
我怎样才能检测到元素外的点击？我在用Vue.所以它将超出我的模板元素.我知道如何在Vanilla JS中做到这一点，但我不确定在使用Vue时是否有更合适的方法.js？
这是香草JS:Javascript Detect Click event outside of div的解决方案
我想我可以用更好的方式访问元素？
请注意，此解决方案仅适用于Vue 1.
可以通过设置一次自定义指令来很好地解决:
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() }
})
Usage:
<div v-click-outside="nameOfCustomEventToCall">
Some content
</div>
在组件中:
events: {
nameOfCustomEventToCall: function (event) {
// do something - probably hide the dropdown menu / modal etc.
}
}
在JSFIDLE上进行演示，并提供有关注意事项的其他信息: