解决双击事件触发两次单击事件
问题
在写前端的时候，偶然发现，当同一个标签同时绑定了 双击事件 和 单击事件
在触发 双击事件 的时候，会先触发两次 单击事件，这显然是不符合预期的
解决办法
可以通过增加一个延时来解决这个问题
写一个按钮
这里写一个按钮来演示
<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>
本文来自博客园，作者：厚礼蝎，转载请注明原文链接：https://www.cnblogs.com/guangdelw/p/18011621
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了