vue单机事件和双击事件冲突解决办法

比如需求是给一个dom或者按钮添加单机事件，还要添加双击事件，如果不做处理，在双击按钮的时候，它会执行两次单机事件和一次双击事件；

例如：

<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>

如果双击按钮，这时控制台会输出：

 解决办法：

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

<template>
  <div >
    <button @click="clickHandler" @dblclick="dblclickHandler">注册</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
        timer: null,  //添加一个计时器
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    clickHandler() {
        clearTimeout(timer); //清除未执行的定时器
        timer = setTimeout(function () {
            console.log('单机事件')
        }, 400);
    },
    dblclickHandler() {
        clearTimeout(timer); //清除未执行的定时器
        console.log('双击事件')
    }
 
  }
}
</script>

vue3的写法：

let timer = null;
//单击事件
const click=()=>{
	clearTimeout(timer); //清除未执行的定时器
        timer = setTimeout(function () {
            console.log('单击事件'); //单击要执行的事件处理
        }, 400);
}
//双击事件
const doubleClick=()=>{
	clearTimeout(timer); //清除未执行的定时器
      console.log('双击事件'); //双击要执行的事件处理

}