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

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

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

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

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

发生单击:

111.png

发生双击:

22.png

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

方法一:

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

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

方法二:

<!DOCTYPE html><html><head>
    <title>判断单击or双击</title>
    <meta charset="utf-8"></head><body>
  <input type="button" onclick="aa()" ondblclick="bb()" value="点我">
  <script type="text/javascript">
     var timer = null; 
     function aa() {
        clearTimeout(timer); 
        if (event.detail == 2)            return ;  
        timer = setTimeout(function() { 
          console.log('单击');
        }, 300); 
    } 
    function bb() { 
        clearTimeout(timer);
        console.log('双击');
    }  </script></body></html>

分别来解释吧。

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

方法三:

<!DOCTYPE html><html><head>
    <title>判断单击or双击</title>
    <meta charset="utf-8"></head><body>
  <input type="button" onclick="aa()" ondblclick="bb()" value="点我">
  <script type="text/javascript">
      var isdb;  
      function aa(){  
        isdb=false;  
        window.setTimeout(cc, 500);        function cc(){  
            if(isdb)                return;  
            alert("单击")  
        }  
      }  
    function bb(){  
        isdb=true;  
        alert("双击")  
    }  
  </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)。

解决方法:

<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>

   


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

发表评论 (933人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

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

其它栏目

· 建站教程
· 365学习

业务咨询

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

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

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