如何在JavaScript中收听三次点击？

Question

如果是双击:

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

如何捕获三击？这适用于Google Chrome中的固定标签.

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浏览器不会触发两次连续点击事件进行双击.不要忘记使用IE 8 attachEvent代替addEventListener.

Answer 2

从DOM Level 2开始,您可以使用鼠标单击处理程序并检查detail事件的参数,该参数应解释为:

从UIEvent继承的detail属性指示在用户操作期间在同一屏幕位置上按下和释放鼠标按钮的次数.当用户开始此操作时,属性值为1,并且对于按下和释放的每个完整序列,属性值增加1.如果用户在mousedown和mouseup之间移动鼠标,则该值将设置为0,表示没有发生单击.

因此,值detail === 3将为您提供三击事件.

有关规范的更多信息,请参见http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent.

感谢@Nayuki https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail - 一个DOM3扩展,它是WIP https://w3c.github.io/uievents/

Answer 3

伪代码：

var clicks = 0

onclick:
clicks++;
setTimer(resetClicksToZero);
if clicks == 3: tripleclickdetected(); clicks = 0;