jq实现同一个元素单击事件和双击事件

在html中，同一个元素，同时绑定click，dbclick事件，执行单击事件时，不会触发双击事件，但是执行双击事件时，会触发两次单击事件

下面先给出上面这句话的可运行例子：
代码片段 1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>
    <body>
        <button class="btn">想我吗？想就点哦！</button>
        <script type="text/javascript">
            $(function() {
                $(".btn").click(function(){
                    console.log(1);
                }).dblclick(function(){
                    console.log(2);
                });
            });
        </script>
    </body>
</html>

上面代码在浏览器F12-Console中会看到，单击时，会显示1，清空Console,双击时，我们会发现出现两个1和一个2！

那么下面我们来看下点击事件的执行顺序：
单击(click)：mousedown，mouseout，click；
　　双击(dblclick)：mousedown，mouseout，click ， mousedown，mouseout，click，dblclick；

在双击事件(dblclick)，触发的两次单击事件(click)中，第一次的单击事件(click)会被屏蔽掉（也就是被单击事件替换了），但第二次不会（单击双击一起触发）。也就是说双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果。而不是一次双击事件(dblclick)结果和两次单击事件结果(click)。

那么，现在知道了单双击事件的原理，而我们经过细细推理，得出只要在不触发单击事件的情况下，干掉双击事件那一次单击事件就可以了！

那么下面先给出可运行的例子：

代码片段 2

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    </head>

    <body>
        <button class="btn">想我吗？想就点哦！</button>
        <script type="text/javascript">
            $(function() {
                var times=null;
                $(".btn").click(function(){
                    clearTimeout(times);
                    times=setTimeout(function(){
                        console.log(1);
                    },300);
                });
                $(".btn").dblclick(function(){
                    clearTimeout(times);
                    console.log(2);
                });
            });
        </script>
    </body>

</html>

那么例子在浏览器运行F12-Console之后可以看到，单击之后，显示1，双击之后，只会显示2！

代码中单击事件函数里，设置了times运行一次300ms，双击事件中（前面我们说的会触发一次单击和一次双击），这里会屏蔽掉单击事件，时间为300ms，超过了300ms，会继续触发单击，不超过则会执行双击

这也只是在一定程度上避免双击事件时触发单击事件！

posted @ 2022-09-29 13:55  与君别  阅读(454)  评论(0)  编辑  收藏  举报