背景:
示例代码:
<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>
效果图:
