Vue中，当组件同时注册单机事件（@click）和双击事件（@dblclick）时，处理事件冲突

背景：

示例代码：

<template>
  <div >
    <button @click="clickHandler" @dblclick="dblclickHandler">注册</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    clickHandler() {
      console.log('单机事件')
    },
    dblclickHandler() {
      console.log('双击事件')
    }

  }
}
</script>

<style>

</style>

事件冲突演示：

如上示例，在单机按钮时，会触发单机事件处理函数，在双击按钮时，会触发2次单机事件处理函数和1次双击事件处理函数

解决办法

利用计时器，在大概时间模拟双击事件

代码：

<template>
  <div>
    <button @click="clickHandler" @dblclick="dblclickHandler">注册</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: null
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    clickHandler() {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        console.log('单机事件')
      }, 300)
    },
    dblclickHandler() {
      clearTimeout(this.timer)
      console.log('双击事件')
    }

  }
}
</script>

<style>

</style>

效果图：