小编典典

检测点击外部元素

javascript

如何检测元素外部的点击?我正在使用Vue.js,因此它将不在我的模板元素之外。我知道如何在Vanilla
JS中做到这一点,但是当我使用Vue.js时,我不确定是否有更合适的方法来做到这一点?

我想我可以使用更好的方法来访问元素?


阅读 236

收藏
2020-05-01

共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() }
})

用法:

<div v-click-outside="nameOfCustomEventToCall">
  Some content
</div>

在组件中:

events: {
  nameOfCustomEventToCall: function (event) {
    // do something - probably hide the dropdown menu / modal etc.
  }
}
2020-05-01