02给元素同时绑定单双击事件

业务：

单击选中高亮

双击跳出弹框

解决方案：

使用“dblclick”这个触发事件：

<template>
  <div>
    <button @click="fn1" @dblclick="fn2">单双击事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    fn1 () {
      console.log('触发单击事件')
    },
    fn2 () {
      console.log('触发双击事件')
    }
  }
}
</script>

这样写，一个很明显的bug就是，当双击按钮的时候，会触发一次双击事件和两次单击事件。

这里，我们可以通过定时器setTimeout来决定是否执行单击事件的逻辑

<template>
  <div>
    <button @click="fn1" @dblclick="fn2">单双击事件</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      flag: null
    }
  },
  methods: {
    fn1 () {
      this.flag = true

      setTimeout(() => {
        // 只有当flag为true的时候才执行单击事件的逻辑
        if (this.flag) {
          console.log('触发单击事件')
        }
      }, 200)
    },
    fn2 () {
      this.flag = false
      console.log('触发双击事件')
    }
  }
}
</script>