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

最新推荐文章于 2025-05-09 15:57:23 发布

_葫芦

最新推荐文章于 2025-05-09 15:57:23 发布

阅读量986

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery html

本文链接：https://blog.youkuaiyun.com/ranzhang1/article/details/94409178

jquery 专栏收录该内容

2 篇文章

订阅专栏

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

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

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

双击先出发单击事件，再触发双击事件。

<!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>

在这里插入图片描述