我如何在 JavaScript 中监听三次点击？

Question

如果这是双击：

 window.addEventListener("dblclick", function(event) { }, false);

如何捕捉三次点击？这适用于 Google Chrome 中的固定标签。

原文由 Sam-Bo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要编写自己的三次点击实现，因为不存在可连续捕获 3 次点击的本机事件。幸运的是，现代浏览器有 event.detail ， MDN 文档将其描述为：

短时间内发生的连续点击次数，以 1 递增。

这意味着您可以简单地检查此属性的值，看看它是否是 3 ：

 window.addEventListener('click', function (evt) {
    if (evt.detail === 3) {
        alert('triple click!');
    }
});

工作演示： http://jsfiddle.net/L6d0p4jo/

---

如果您需要对 IE 8 的支持，最好的方法是先捕获双击，然后再捕获三次单击 — 如下所示：

 var timer,          // timer required to reset
    timeout = 200;  // timer reset in ms

window.addEventListener("dblclick", function (evt) {
    timer = setTimeout(function () {
        timer = null;
    }, timeout);
});
window.addEventListener("click", function (evt) {
    if (timer) {
        clearTimeout(timer);
        timer = null;
        executeTripleClickFunction();
    }
});

工作演示： http://jsfiddle.net/YDFLV/

这样做的原因是旧的 IE 浏览器不会为双击触发两个连续的单击事件。不要忘记使用 attachEvent 代替 IE 8 的 addEventListener 。

原文由 Andy E 发布，翻译遵循 CC BY-SA 3.0 许可协议