JS - 解决鼠标单击、双击事件冲突问题（原生js实现）

佚名 6年前 (2019-04-10) 随笔 574人围观抢沙发百度已收录

由于鼠标双击时每一次触发双击事件都会引起两次单击事件和一次单击事件，原生的js不提供专门的双击事件。

因为业务原因，双击和单机都绑定了不同的业务，在双击的时候又触发了单机，影响了页面的正常显示

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

出现问题的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
      /*
       * 页面初始化
       */
      function onload() {
        document.addEventListener('click', onDocumentClick);
        document.addEventListener('dblclick', onDocumenDblClick);
      }
 
      /*
       * 鼠标单击事件响应
       * event 鼠标事件对象
       */
      function onDocumentClick(event) {
        console.log("鼠标单击");
      }
 
      /*
       * 鼠标双击事件响应
       * event 鼠标事件对象
       */
      function onDocumenDblClick(event) {
        console.log("鼠标双击");
      }
    </script>
  </head>
  <body onload="onload()">
  </body>
</html>

解决办法：

setTimerout

所以双击时为了屏蔽单击事件，引入定时器功能，动态的为每次鼠标单击计时，300ms，300ms内鼠标再次点击会出发双击事件而不走单击事件

解决代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
      //单击延时触发
      var clickTimeId;
 
      /*
       * 页面初始化
       */
      function onload() {
        document.addEventListener('click', onDocumentClick);
        document.addEventListener('dblclick', onDocumenDblClick);
      }
 
      /*
       * 鼠标单击事件响应
       * event 鼠标事件对象
       */
      function onDocumentClick(event) {
        // 取消上次延时未执行的方法
        clearTimeout(clickTimeId);
        //执行延时
        clickTimeId = setTimeout(function() {
          //此处为单击事件要执行的代码
          console.log("鼠标单击");
        }, 250);
      }
 
      /*
       * 鼠标双击事件响应
       * event 鼠标事件对象
       */
      function onDocumenDblClick(event) {
        // 取消上次延时未执行的方法
        clearTimeout(clickTimeId);
        console.log("鼠标双击");
      }
    </script>
  </head>
  <body onload="onload()">
  </body>
</html>