木子屋
 

标题: 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">
$(document).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">
$(document).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 0.597 ms

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

你没有权限发表评论

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.597 ms

暂无评论

返回

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

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.597 ms