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

Question

如果这是双击:

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

如何捕获三次点击？这是针对 Google Chrome 中的固定标签。

Answer 1

您需要编写自己的三次点击实现，因为不存在可连续捕获 3 次点击的 native 事件。幸运的是，现代浏览器有 event.detail，MDN documentation describes as :

A count of consecutive clicks that happened in a short amount of time, incremented by one.

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

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

Working demo: 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();
    }
});

Working demo: http://jsfiddle.net/YDFLV/

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