js判断鼠标单击或者双击事件

最新推荐文章于 2025-11-30 01:59:27 发布

原创最新推荐文章于 2025-11-30 01:59:27 发布 · 4.6w 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

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>

发生单击：

这里写图片描述

发生双击：

这里写图片描述

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

方法一：

<!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出去。