手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js鼠标单击和双击事件冲突问题的快速解决方法
js鼠标单击和双击事件冲突问题的快速解决方法
摘要:情况一如果在一个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鼠标单击和双击事件冲突问题的快速解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持查字典教程网。

【js鼠标单击和双击事件冲突问题的快速解决方法】相关文章:

js实现两点之间画线的方法

png在IE6 下无法透明的解决方法汇总

js验证上传图片的方法

javascript嵌套函数和在函数内调用外部函数的区别分析

js禁止页面刷新与后退的方法

jquery简单实现外部链接用新窗口打开的方法

js实现键盘Enter键提交表单的方法

javascript实现树形菜单的方法

JQuery自动触发事件的方法

JavaScript获取当前运行脚本文件所在目录的方法

精品推荐
分类导航