| 标题 | js鼠标单击和双击事件冲突问题的快速解决方法 |
| 内容 | 下面小编就为大家带来一篇js鼠标单击和双击事件冲突问题的快速解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。 情况一 如果在一个DOM对象上同时绑定单击(click)和双击(dblclick)事件，当在这个DOM对象上发生双击事件时，第一次点击（click）会 触发一次单击（click）事件，第二次点击（连续的）也会触发双击（dblclick）事件，还是会触发单击（click）事件（IE7与 firefox）。 解决方法： <button onclick="test(1)" 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();" onclick="clickTest();" value="click test" /> <div id="result"></div> 以上这篇js鼠标单击和双击事件冲突问题的快速解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。