双击事件未触发答案

【问题标题】：Double click events not firing双击事件未触发
【发布时间】：2018-03-31 16:53:22
【问题描述】：

JavaScript 中的双击事件存在一些问题。

我希望能够快速连续单击一个元素，但听双击。这在技术上是否可行，还是我需要单击一下并在单击两次时进行监听？

codepen 示例here。

JS 也可以在下面找到。

(function() {

  var el;
  var count = 0;
  var counter;

  function init() {
    el = document.getElementById('click-me');
    counter = document.getElementById('counter');

    el.addEventListener('dblclick', onDblClick, false);
  }

  function onDblClick(e) {
    count++;
    counter.textContent = count;
  }

  init();

}());

似乎双击某物后，您需要稍作停顿以使其重置事件，可能是一秒或半秒？

dblclick 事件本身是否缺少某些东西，或者我试图做的事情是不可能的？

附注这仅需要在 Webkit/Chrome 中工作，因为这不是用于网站，而是用于游戏的叠加层。

【问题讨论】：

我可以疯狂地点击你的 codepen，它会不断增加。您的问题出在特定的浏览器/设备/输入法上吗？
@Fenton 虽然它可以工作，但有时对我来说会失败（需要双击 3 次），在 Chrome 61 上运行。
看起来它可以在 Edge、IE 和 Firefox 中使用。我只需要它在 Chrome/Webkit 中工作，因为它不是专门针对网站的。我会更新我的问题。
@ChronixPsyc 根据 MDN dblclick on Chrome 仅适用于 "[1] 仅适用于元素和某些 <input> 元素类型。" Ref跨度>
双击之间似乎需要暂停。如果你连续点击太多次，它只会工作一次。不过有点道理，如果我连续点击 4 次，那么即使双击触发也是四次点击，因为没有四次或三次点击之类的东西

标签： javascript event-listener double-click

【解决方案1】：

类似这样的东西 (https://gist.github.com/karbassi/639453)：

(function() {

  var el;
  var count = 0;
  var counter;
  var clickCount = 0;

  function init() {
    el = document.getElementById('click-me');
    counter = document.getElementById('counter');

    el.addEventListener('click', onDblClick, false);
  }

  function onDblClick(e) {

    clickCount++;
    if (clickCount === 1) {
        singleClickTimer = setTimeout(function() {
            clickCount = 0;            
        }, 400);
    } else if (clickCount === 2) {
        count++;
        clearTimeout(singleClickTimer);
        clickCount = 0;
        counter.textContent = count;
    }
}
  init();

}());

【讨论】：

谢谢！看起来这是最好的解决方案。 dblclick 在我使用的 Webkit 引擎中看起来不太一致。