双击事件无法触发

Question

在JavaScript中有一些关于双击事件的问题。

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

以下是一个Codepen示例链接。

下面是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事件本身的某些内容，或者我试图做的事情不可能？

P.S. 这仅需要在Webkit / Chrome中工作，因为这不是用于网站，而是用于游戏的覆盖层。

- ChronixPsyc

---

我可以在你的CodePen上进行愤怒点击，它可以正常递增。你的问题出现在特定的浏览器/设备/输入方法中吗？ - Fenton

@Fenton 虽然它能够工作，但有时候对我来说会失败（需要三次双击），在 Chrome 61 上运行。 - Adrian

看起来它在Edge、IE和Firefox中都可以工作。我实际上只需要它在Chrome/Webkit中工作，因为这不是特别为网站设计的。我会更新我的问题。 - ChronixPsyc

根据MDN的说法，Chrome上的dblclick仅适用于“[1]仅适用于<textarea>元素和某些<input>元素类型。” 参考 - Adrian

似乎需要在双击之间暂停一下。如果您连续点击太多次，它只会起作用一次。这有点说得通，如果我连续点击4次，那么虽然双击触发，但实际上是四次单击，因为没有四次或三次单击这样的东西。 - Huangism

Answer 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();

}());

- user4219031

---

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