您现在的位置： 365建站网 > 365文章 > js判断鼠标单击或者双击事件 冲突问题的解决方法

js判断鼠标单击或者双击事件 冲突问题的解决方法

文章来源：365jz.com     点击数：972    更新时间：2018-07-31 10:16   参与评论

单击事件是指鼠标发生一次点击事件，经历了onmousedown,onmouseup,onclick的过程；双击事件是指鼠标连续在同一位置连续点击两次，经历了onmousedown，onmouseup，onclick，onmousedown，onmouseup，onclick，ondblclick的过程；以下代码验证了这一点：

</>code
  1. <!DOCTYPE html><html><head>
  2.     <title></title>
  3.     <meta charset="utf-8"></head><body>
  4.     <input type="button" onclick="test1()" ondblclick="test2()" value="点击">
  5.     <script type="text/javascript">
  6.        function test1 () {
  7.         console.log('单击');
  8.        }       function test2 () {
  9.         console.log('双击');
  10.        }    </script></body></html>

发生单击：

111.png

发生双击：

22.png

所以呢 如果想要单独处理点击和双击的事件怎么办，这里我在网上大概了解了三个例子，分享出来顺便整理一下：

方法一：

</>code
  1. <!DOCTYPE html><html><head>
  2.     <title>判断单击or双击</title>
  3.     <meta charset="utf-8"></head><body>
  4.     <input type="button" onclick="test()" ondblclick="test()" value="点击">
  5.     <div  id="mxh"> </div>
  6.     <script type="text/javascript">
  7.       function  test() { 
  8.          if(event.type == "dblclick")     
  9.             document.all.mxh.innerText = "你双击了我";         if(event.type == "click")   
  10.             document.all.mxh.innerText = "你单击了我";
  11.       } 
  12.     </script></body></html>

这是一个笨办法，也就是通过事件的类型来判断是单击还是双击，然后将结果存到一个div里，结束后取div里的值来判断是哪种类型。

方法二：

</>code
  1. <!DOCTYPE html><html><head>
  2.     <title>判断单击or双击</title>
  3.     <meta charset="utf-8"></head><body>
  4.   <input type="button" onclick="aa()" ondblclick="bb()" value="点我">
  5.   <script type="text/javascript">
  6.      var timer = null; 
  7.      function aa() {
  8.         clearTimeout(timer); 
  9.         if (event.detail == 2)            return ;  
  10.         timer = setTimeout(function() { 
  11.           console.log('单击');
  12.         }, 300); 
  13.     } 
  14.     function bb() { 
  15.         clearTimeout(timer);
  16.         console.log('双击');
  17.     }  </script></body></html>

分别来解释吧。

单击：用户单击触发aa函数，清除定时器这个先不管，if里的意思是如果在同样的地方执行同种方法两次，也就是双击的意思，退出这个函数，单击嘛不会触发if。下来给定时器赋值，300ms后执行输出单击的这句话，如果单击的话就不会在300ms里触发其他事件，所以单击解释完毕。 
双击：用户双击触发两次click和一次dbclick。第一次先执行aa函数，因为这是第一次所以不会return，300ms之间还没有等单击这两个字输出便再次触发了aa函数，次数记为两次，return出去，之后触发bb函数，输出双击两个字。

方法三：

</>code
  1. <!DOCTYPE html><html><head>
  2.     <title>判断单击or双击</title>
  3.     <meta charset="utf-8"></head><body>
  4.   <input type="button" onclick="aa()" ondblclick="bb()" value="点我">
  5.   <script type="text/javascript">
  6.       var isdb;  
  7.       function aa(){  
  8.         isdb=false;  
  9.         window.setTimeout(cc, 500);        function cc(){  
  10.             if(isdb)                return;  
  11.             alert("单击")  
  12.         }  
  13.       }  
  14.     function bb(){  
  15.         isdb=true;  
  16.         alert("双击")  
  17.     }  
  18.   </script></body></html>

先设定一个判断变量，定义三个函数aa，bb，cc。 
单击：进入aa函数，设置判断变量为false，设置一个定时器，500ms后触发cc函数，因为是单击所以之后没有了多余的操作，进而顺利进入cc函数，判断变量如果为真说明进入过bb函数也就是执行过dbclick的步骤，所以return，然而这里直接跳过去执行了输出单击的操作。 
双击：进入aa函数，将判断变量赋值为false，设置定时器，500ms之内又进入了aa函数然而一直没有执行cc函数，之后又执行了bb函数，设置了判断变量为真值，弹出双击二字，这时才开始进入cc函数，因为判断变量为真值，所以两次都会return出去。

js鼠标单击和双击事件冲突问题的快速解决方法


情况一

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

解决方法：

</>code
  1. <button onclick="test(1)" ondblclick="test(2)"></button>
  2. <script language="javascript">
  3. var i = 1;
  4. function test(n)  {
  5. i = n;
  6. var val = setTimeout("call();",250);
  7. if(i==2){
  8. clearTimeout(val);
  9. }
  10. }
  11. function  call()  {
  12. if(i==1){
  13. alert('click');
  14. }else if(i==2){
  15. alert('dblclick');
  16. }
  17. }
  18. </script>

   

解释：

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

第二种：

</>code
  1. <title>区分单击和双击-www.jb51.net</title>
  2. <script type="text/javascript">
  3. var flag=0;
  4. function clickTest()
  5. {
  6.  if(!flag)
  7.  {
  8.  setTimeout("tt2();",300);
  9.  }
  10.  flag++;
  11. }
  12. function reset()
  13. {
  14.  flag=0;
  15. }
  16. function singleClick()
  17. {
  18.  var result=document.getElementByIdx_x('result');
  19.  result.innerHTML=result.innerHTML+"click<br>";
  20.  reset();
  21. }
  22. function dobuleClick()
  23. {
  24.  var result=document.getElementByIdx_x('result');
  25.  result.innerHTML=result.innerHTML+"dobule click<br>";
  26.  reset();
  27. }
  28. function tt2()
  29. {
  30.  if(flag==1)
  31.  {
  32.  singleClick();
  33.  }
  34.  else
  35.  {
  36.  dobuleClick();
  37.  }
  38. }
  39. </script>
  40. </head>
  41. <body>
  42. <input type="button" ondblclick="clickTest();" onclick="clickTest();" value="click test" />
  43. <div id="result"></div>

   


如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛

您可能感兴趣的文章:

发表评论 (972人查看，0条评论)
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
昵称：
最新评论
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容

公司信息

· 网站介绍
· 联系我们
· 加入我们
· 服务条款

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间：9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号