当两个事件绑定在同一个 dom 上时，只会触发单击事件

使用延迟来解决，代码如下：

  1. // html
  2. <div id="a">单击 or 双击</div>
  4. // js
  5. const dom = document.getElementById('a');
  6. // 单击事件
  7. dom.onclick = function () {
  8.   if (window.timer) {
  9.     clearTimeout(window.timer);
  10.     window.timer = null;
  11.   }
  12.   window.timer = setTimeout(function () {
  13.        // TODO: 业务代码
  14.     alert('单击');
  15.   }, 200);
  16. };
  17. // 双击事件
  18. dom.ondblclick = function () {
  19.   if (window.timer) {
  20.     clearTimeout(window.timer);
  21.     window.timer = null;
  22.   }
  23.   // TODO: 业务代码
  24.   alert('双击');
  25. }

使用计数+延迟解决，代码如下：

不使用 dblclick 事件，只使用 click。在单位时间延迟内点击 2次 则为双击，否则为单击

  1. // html
  2. <div id="b">单击 or 双击</div>
  4. // js
  5. const dom2 = document.getElementById('b');
  6. let count = 0;
  7. dom2.onclick = function () {
  8.   count ++;
  9.   window.timer2 = setTimeout(function () {
  10.     if (count === 1) {
  11.       // TODO: 业务代码
  12.       alert('单击');
  13.       count = 0;
  14.       return;
  15.     }
  17.     // TODO: 双击业务代码
  18.     alert('双击');
  19.     count = 0;
  20.     clearTimeout(window.timer2);
  21.     window.timer2 = null;
  22.   }, 200);
  23. }