检测点击外部元素

Question

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

这是 Vanilla JS 的解决方案： Javascript Detect Click event outside of div

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

原文由 user6102188 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

请注意，此解决方案仅适用于 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() }
})

用法：

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

在组件中：

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

JSFiddle 上的工作演示以及有关警告的其他信息：

https://jsfiddle.net/Linusborg/yzm8t8jq/

原文由 Linus Borg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

有我使用的解决方案，它基于 Linus Borg 的回答，适用于 vue.js 2.0。

 Vue.directive('click-outside', {
  bind: function (el, binding, vnode) {
    el.clickOutsideEvent = function (event) {
      // here I check that click was outside the el and his children
      if (!(el == event.target || el.contains(event.target))) {
        // and if it did, call method provided in attribute value
        vnode.context[binding.expression](event);
      }
    };
    document.body.addEventListener('click', el.clickOutsideEvent)
  },
  unbind: function (el) {
    document.body.removeEventListener('click', el.clickOutsideEvent)
  },
});

您使用 v-click-outside 绑定到它：

 <div v-click-outside="doStuff">

这是一个小演示

您可以在 https://v2.vuejs.org/v2/guide/custom-directive.html#Directive-Hook-Arguments 中找到有关自定义指令以及 el、绑定、vnode 含义的更多信息

原文由 MadisonTrash 发布，翻译遵循 CC BY-SA 4.0 许可协议