欢迎光临

木子屋

标题: jQuery鼠标双击时误触发click事件解决方法

作者: dnawo

日期: 2023-07-09 11:34 PM

分类: 其他

内容: 当页面按钮同时绑定了dblclick和click两个事件时，双击会发现触发了一次dblclick事件和两次click事件：
复制内容到剪贴板 程序代码<input name="btn1" id="btn1" type="button" value="随便点">
<script type="text/javascript">
.ready(function(){
$("#btn1").on("click", function(){console.log("click")});
$("#btn1").on("dblclick", function(){console.log("dblclick")});
});
</script>
也就是说，误触发了两次click事件，怎么避免呢？将代码稍做修改：
复制内容到剪贴板 程序代码<input name="btn1" id="btn1" type="button" value="随便点">
<script type="text/javascript">
.ready(function(){
let timer = null;
$("#btn1").on("click", function(){
if(timer){clearTimeout(timer)}
timer = setTimeout(function(){console.log("click")}, 300);
});
$("#btn1").on("dblclick", function(){
if(timer){clearTimeout(timer)}
console.log("dblclick");
});
});
</script>
OK，问题解决！

+ 查看当前日志评论 (0)

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 1.041 ms

返回

标题: jQuery鼠标双击时误触发click事件解决方法

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 1.041 ms

返回

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 1.087 ms

返回