JS - 解决鼠标单击、双击事件冲突问题（同时实现两种事件响应）

2017-09-26 发布：hangge 阅读：6622

1，问题描述

如果想让一个 DOM 对象既可以被单击，也可以被双击，可以在该对象上同时绑定单击（click）和双击（dblclick）事件。

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

（1）测试了下单击是没问题的，控制台输出如下：

（2）但如果是双击会发现，除了触发双击事件，在双击事件之前还会连续触发两次单击事件：

2，解决办法

通过设置两次点击事件的间隔时间(setTimeout 方法)，来实现双击、单击事件并存。

单击后不立刻执行相关的代码，而是让其延时执行（比如：200ms）
如果随后发生了双击事件，则取消延时执行的方法，只执行双击事件方法。

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

再次双击，可以发现不会再执行单击的方法了。