JQuery如何实现双击事件时不触发单击事件,解决鼠标单双击冲突问题.

本文探讨了在使用jQuery时,如何解决单击(click)和双击(dblclick)事件之间的冲突问题。通过设置定时器,确保双击事件触发时不会误触发单击事件,实现了更精确的事件控制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在jQuery的事件绑定中,如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么
执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblclick)时却会触 发两次单击事件(click)。
但有时候我们希望在执行双击事件的时候不去出发单击事件,那究竟该如何实现呢?

  1. 双击先出发单击事件,再触发双击事件。
<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        
        <button>点击</button>

        <script src="./jquery.js"></script>
        <script>
            $(function (param) {  
                $('button').click(function (param) {  
                    console.log('单击');
                });
                $('button').dblclick(function(){
                    console.log('双击');
                });
            });
        </script>
    </body>
</html>

在这里插入图片描述
2. 解决单双击冲突问题。两次单击的时间间隔为300ms

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        
        <button>点击</button>

        <script src="./jquery.js"></script>
        <script>
            $(function (param) {  
               
                //单击两次的时间间隔为300ms
                var timer = null;
                $('button').click(function (param) {  
                    clearTimeout(timer);
                    timer = setTimeout(function(){
                        console.log('单击');
                    }, 300);
                });
                $('button').dblclick(function (param) {  
                    
                        clearTimeout(timer);
                        console.log('双击');
                    
                });

            });
        </script>
    </body>
</html>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值