检测单击外部元素 [英] Detect click outside element

问题描述

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

How can I detect a click outside my element? I'm using Vue.js so it's gonna be outside my templates element. I know how to do it in Vanilla JS, but I'm not sure if there's a more proper way to do it, when I'm using Vue.js?

这是Vanilla JS的解决方案： Javascript检测div之外的Click事件

This is the solution for Vanilla JS: Javascript Detect Click event outside of div

我想我可以用更好的方式来访问元素吗？

I guess I can use a better way to access the element?

推荐答案

通过设置一次自定义指令可以很好地解决：

Can be solved nicely by setting up a custom directive once:

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的工作演示以及有关警告的其他信息：

Working Demo on JSFiddle with additional info about caveats:

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

这篇关于检测单击外部元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！