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

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设定的延时响应事件,即单击后的实际响应事件),如此便区分开了单击和双击事件。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值