如何检测元素外部的点击?我正在使用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. } }