问题
在写前端的时候，偶然发现，当同一个标签同时绑定了 双击事件 和 单击事件
在触发 双击事件 的时候，会先触发两次 单击事件，这显然是不符合预期的
解决办法
可以通过增加一个延时来解决这个问题
写一个按钮
这里写一个按钮来演示
<body>
<button onclick="handleClick()" ondblclick="handleDblClick()">点击或双击我</button>
</body>
<script>
const handleClick = () => {
console.log('单击事件');
};
const handleDblClick = () => {
console.log('双击事件')
}
</script>
效果
双击后
查看控制台
可以看到，双击会先触发两次单击
通过延时保证单击
<body>
<button onclick="handleClick()" ondblclick="handleDblClick()">点击或双击我</button>
</body>
<script>
let clickTimeout = null;
const handleClick = () => {
if (this.clickTimeout) {
// 如果已经设置了定时器，说明是双击事件，取消定时器
clearTimeout(this.clickTimeout);
this.clickTimeout = null;
console.log('双击事件');
} else {
// 如果没有设置定时器，说明是单击事件，设置定时器并等待一段时间
this.clickTimeout = setTimeout(() => {
console.log('单击事件');
this.clickTimeout = null;
}, 200);
}
};
const handleDblClick = () => {
console.log('双击事件')
}
</script>
效果
双击后
补充
如果是在vue2中使用
<template>
<div>
<button @click="handleClick" @dblclick="handleDblClick">点击或双击我</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
if (this.clickTimeout) {
// 如果已经设置了定时器，说明是双击事件，取消定时器
clearTimeout(this.clickTimeout)
this.clickTimeout = null
console.log('双击事件')
} else {
// 如果没有设置定时器，说明是单击事件，设置定时器并等待一段时间
this.clickTimeout = setTimeout(() => {
console.log('单击事件')
this.clickTimeout = null
}, 200)
}
},
handleDblClick() {
console.log('双击事件')
}
},
data() {
return {
clickTimeout: null
}
}
}
</script>