js中单击和双击事件的区分

最新推荐文章于 2024-09-11 17:21:03 发布

csmzl

最新推荐文章于 2024-09-11 17:21:03 发布

阅读量3.8w

点赞数 8

分类专栏： JS和JQuery 文章标签： javascript jquery 单击双击分离

本文链接：https://blog.csdn.net/csmzl/article/details/53995969

版权

JS和JQuery 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

js中单击和双击事件的区分

1. 首先要了解鼠标点击（单击或双击）时包含的事件。

mousedown 事件：

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。

mouseup 事件：

当在元素上放松鼠标按钮时，会发生 mouseup 事件。与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。

click（单击）事件：

当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。

dblclick（双击）事件：

当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。在很短的时间内发生两次 click，即是一次 double click 事件。

2. 其次要了解鼠标点击事件中各个事件的执行顺序。

先看个例子：

<html>
    <head>
        <script type="text/javascript" src="jquery-1.12.1.js"></script>
    </head>
    <body>
        <input type="button" id="testBtn" value="单击我或者双击我">  
        <script language="javascript">  
            var a = 0;
            $("#testBtn").on("mousedown",function(){
                console.log("this is mousedown event");
                console.log("a=" + a++);
            });
            $("#testBtn").on("mouseup",function(){
                console.log("this is mouseup event");
                console.log("a=" + a++);
            });
            $("#testBtn").on("click",function(){
                console.log("this is click event");
                if(a==2){
                    $("#testBtn").css("background-color","red");
                }
                if(a==5){
                    $("#testBtn").css("background-color","green");
                }
                console.log("a=" + a++);
            });
            $("#testBtn").on("dblclick",function(){
                console.log("this is dblclick event");
                console.log("a=" + a++);
            });
        </script>  
    </body>
</html>

单击时，以上代码在浏览器控制台中的输出结果是：

this is mousedown event
a=0
this is mouseup event
a=1
this is click event
a=2

双击时，以上代码在浏览器控制台中的输出结果是：

this is mousedown event
a=0
this is mouseup event
a=1
this is click event
a=2
this is mousedown event
a=3
this is mouseup event
a=4
this is click event
a=5
this is dblclick event
a=6

从输出结果中我们可以看到，鼠标点击事件中各个事件的执行顺序是：

单击（click）:  mousedown，mouseup，click；
双击（dbclick）： mousedown，mouseup，click，mousedown，mouseup，click，dblclick 。

同时，从a的结果和按钮的背景颜色变化来看：

1. 从背景颜色的最终颜色来看，第一次单击事件被覆盖了，并不是被屏蔽或阻止了。 
2. 从a的值变化来看，双击事件中的两次单击事件代码都执行了，而且a的值一直在增长。

3. 如何区分单击和双击事件

从以上的分析来看，只要我们能把双击事件中的前两次单击事件清除掉，那就只剩下双击事件了（若想去除重复的mousedown和mouseup事件，可用同样的方法）。

利用setTimeout和clearTimeout来实现对事件的清除。

对上面的例子进行如下修改：

<html>
    <head>
        <script type="text/javascript" src="jquery-1.12.1.js"></script>
    </head>
    <body>
        <input type="button" id="testBtn" value="单击我或者双击我">  
        <script language="javascript">  
            var a = 0;
            var timeoutID= null;
            $("#testBtn").on("mousedown",function(){
                console.log("this is mousedown event");
                console.log("a=" + a++);
            });
            $("#testBtn").on("mouseup",function(){
                console.log("this is mouseup event");
                console.log("a=" + a++);
            });
            $("#testBtn").on("click",function(){
                clearTimeout(timeoutID);
                timeoutID= window.setTimeout(function(){
                    console.log("this is click event");
                    if(a==2){
                        $("#testBtn").css("background-color","red");
                    }
                    if(a==5){
                        $("#testBtn").css("background-color","green");
                    }
                    console.log("a=" + a++);
                }, 200);
            });
            $("#testBtn").on("dblclick",function(){
                clearTimeout(timeoutID);
                console.log("this is dblclick event");
                console.log("a=" + a++);
            });
        </script>  
    </body>
</html>

以上代码在浏览器控制台中的输出结果是：

this is mousedown event
a=0
this is mouseup event
a=1
this is mousedown event
a=2
this is mouseup event
a=3
this is dblclick event
a=4

关键点分析：

setTimeout事件中的延迟时间（单位为毫秒）和clearTimeout事件。（欲知该延迟时间的确定可以查看下一篇文章）

归总：

为了区分单击和双击事件，稍微延迟单击事件中的实际动作（单击后的实际想做的change），利用setTimeout使其延时，让程序继续往下走，然后在程序进入dblclick 事件时，利用clearTimeout来删除仍在等待中的响应事件（setTimeout设定的延时响应事件，即单击后的实际响应事件），如此便区分开了单击和双击事件。