js鼠标单击和双击事件冲突问题的快速解决方法
js鼠标单击和双击事件冲突问题的快速解决方法
发布时间:2016-12-30 来源:查字典编辑
摘要:情况一如果在一个DOM对象上同时绑定单击(click)和双击(dblclick)事件,当在这个DOM对象上发生双击事件时,第一次点击(cli...

情况一

如果在一个DOM对象上同时绑定单击(click)和双击(dblclick)事件,当在这个DOM对象上发生双击事件时,第一次点击(click)会 触发一次单击(click)事件,第二次点击(连续的)也会触发双击(dblclick)事件,还是会触发单击(click)事件(IE7与 firefox)。

解决方法:

<button ondblclick="test(2)"></button> <script language="javascript"> var i = 1; function test(n) { i = n; var val = setTimeout("call();",250); if(i==2){ clearTimeout(val); } } function call() { if(i==1){ alert('click'); }else if(i==2){ alert('dblclick'); } } </script>

解释:

第一次点击记录下点击的时间,并设置单击事件的Timeout(250ms比较合适),第二次点击时判断此时点击的时间与上次点击的时间间隔,如果小于指 定的事件间隔(比如250ms),则判断为双击事件,并clear已设置的Timeout(避免触发单击事件)。

第二种:

<title>区分单击和双击-www.jb51.net</title> <script type="text/javascript"> var flag=0; function clickTest() { if(!flag) { setTimeout("tt2();",300); } flag++; } function reset() { flag=0; } function singleClick() { var result=document.getElementByIdx_x('result'); result.innerHTML=result.innerHTML+"click<br>"; reset(); } function dobuleClick() { var result=document.getElementByIdx_x('result'); result.innerHTML=result.innerHTML+"dobule click<br>"; reset(); } function tt2() { if(flag==1) { singleClick(); } else { dobuleClick(); } } </script> </head> <body> <input type="button" ondblclick="clickTest();" value="click test" /> <div id="result"></div>

以上这篇js鼠标单击和双击事件冲突问题的快速解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持查字典教程网。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类