js中单击和双击事件的区分
2017-01-03 16:58
323 查看
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设定的延时响应事件,即单击后的实际响应事件),如此便区分开了单击和双击事件。相关文章推荐
- js区分鼠标单击和双击事件
- 区分 touch 事件是单击还是双击
- C# 中如何区分鼠标的单击或双击事件
- C#窗体鼠标事件区分单击双击
- JS中双击和单击事件冲突的解决方法
- iPhone开发之区分 touch 事件是单击还是双击的方法
- android webview js交互, 响应webview中的图片点击事件 ,点击(双击)使图片变大,单击退出
- js(javascript) onclick与ondblclick 单击与双击事件
- iOS touch事件单击双击区分响应
- JS实现鼠标单击与双击事件共存
- js鼠标单击和双击事件冲突问题的快速解决方法
- js鼠标单击和双击事件冲突问题的解决方法
- qt 实现、区分鼠标单击,双击事件
- JS单击与双击事件共存
- js鼠标单击和双击事件冲突问题的解决方法
- iOS touch事件区分单击双击响应的方法
- js区分鼠标单双击 阻止事件冒泡
- 如何区分单击和双击事件
- js实现对Android设备物理返回键单击/双击事件处理(Framework7框架)