如何在JavaScript中侦听三次单击？

如果这是为了双击：

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

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

伪代码：

---

您需要编写自己的三次单击实现，因为不存在捕获一行三次单击的本机事件。幸运的是，现代浏览器有

event.detail

，其中：

在短时间内发生的连续单击次数，递增1

这意味着您只需检查此属性的值，看看它是否为

3

：

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

工作演示：

---

如果您需要对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();
    }
});

工作演示：

---

原因是旧的IE浏览器不会为双击触发两个连续的点击事件。别忘了在IE 8中使用

attachEvent

代替

addEventListener

。

我正在开发一个javascript代码编辑器，我必须听三次点击，以下是适用于大多数浏览器的解决方案：

// Function to get mouse position
var getMousePosition = function (mouseEvent) {
    var currentObject = container;
    var currentLeft = 0;
    var currentTop = 0;
    do {
        currentLeft += currentObject.offsetLeft;
        currentTop += currentObject.offsetTop;
        currentObject = currentObject.offsetParent;
    } while (currentObject != document.body);
    return {
        x: mouseEvent.pageX - currentLeft,
        y: mouseEvent.pageY - currentTop
    }
}

// We will need a counter, the old position and a timer
var clickCounter = 0;
var clickPosition = {
    x: null,
    y: null
};
var clickTimer;

// The listener (container may be any HTML element)
container.addEventListener('click', function (event) {

    // Get the current mouse position
    var mousePosition = getMousePosition(event);

    // Function to reset the data
    var resetClick = function () {
        clickCounter = 0;
        var clickPosition = {
            x: null,
            y: null
        };
    }

    // Function to wait for the next click
    var conserveClick = function () {
        clickPosition = mousePosition;
        clearTimeout(clickTimer);
        clickTimer = setTimeout(resetClick, 250);
    }

    // If position has not changed
    if (clickCounter && clickPosition.x == mousePosition.x && clickPosition.y == mousePosition.y) {
        clickCounter++;
        if (clickCounter == 2) {
            // Do something on double click
        } else {
            // Do something on triple click
            resetClick();
        }
        conserveClick();
    } else {
        // Do something on single click
        conserveClick();
    }
});

在Firefox 12、Google Chrome 19、Opera 11.64、Internet Explorer 9上测试

---

这种方法检查用户是否没有改变光标的位置，当您单击或双击鼠标时，仍然可以执行某些操作。希望此解决方案能帮助所有需要实现三次单击事件侦听器的人：）

由于DOM级别2，您可以使用鼠标单击处理程序并检查事件的

详细信息
参数，该参数应解释为：

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

因此，
detail==3
的值将为您提供三次单击事件

更多信息，请访问

多亏了@Nayuki-一个DOM3扩展，它是WIP，这里是真正的三次点击事件，只有当所有三次点击以相等的间隔触发时才会触发


//默认设置
var minClickInterval=100，
maxClickInterval=500，
最小百分比第三=85.0，
最大百分之三=130.0；
//运行时
var hasOne=false，
hasTwo=假，
时间=[0,0,0]，
差异=[0,0]；
$（'#btn'）。在（'click'，function（）上{
var now=Date.now（）；
//第二次单击超时后清除运行时
if（时间[1]&&now-time[1]>=maxClickInterval）{
clearRuntime（）；
}
//第三次单击超时后清除运行时
if（时间[0]&&time[1]&&now-time[0]>=maxClickInterval）{
clearRuntime（）；
}
//点击第三次
如果（有两个）{
时间[2]=日期。现在（）；
diff[1]=时间[2]-时间[1]；
var deltaPercent=100.0*（差异[1]/差异[0]）；
如果（deltaPercent>=minPercentThird&&deltaPercent=minClickInterval&&diff[0]正确操作非常简单，您甚至可以根据需要捕获单次、双次、三次……单击。纯javascript，可自定义的单击延迟（超时）：

什么是不幸的IE bug？@Tim:ondblclick
ondblclick
触发时，
onclick
仅在两次点击中触发一次。可能在IE9中修复过（我没有检查）。edit，是的，在IE 9中修复了-啊，是的，我听说过。感谢您的澄清。这很好，谢谢。有人知道“短时间”是什么吗是吗？@elPastor:MDN页面现在说：“……间隔的具体时间可能因浏览器和平台而异。间隔也可能受用户首选项的影响；例如，可访问性选项可能会延长此间隔，以便更轻松地使用自适应界面执行多次单击。”谢谢你的推荐。工作起来很有魅力：）
// Function to get mouse position
var getMousePosition = function (mouseEvent) {
    var currentObject = container;
    var currentLeft = 0;
    var currentTop = 0;
    do {
        currentLeft += currentObject.offsetLeft;
        currentTop += currentObject.offsetTop;
        currentObject = currentObject.offsetParent;
    } while (currentObject != document.body);
    return {
        x: mouseEvent.pageX - currentLeft,
        y: mouseEvent.pageY - currentTop
    }
}

// We will need a counter, the old position and a timer
var clickCounter = 0;
var clickPosition = {
    x: null,
    y: null
};
var clickTimer;

// The listener (container may be any HTML element)
container.addEventListener('click', function (event) {

    // Get the current mouse position
    var mousePosition = getMousePosition(event);

    // Function to reset the data
    var resetClick = function () {
        clickCounter = 0;
        var clickPosition = {
            x: null,
            y: null
        };
    }

    // Function to wait for the next click
    var conserveClick = function () {
        clickPosition = mousePosition;
        clearTimeout(clickTimer);
        clickTimer = setTimeout(resetClick, 250);
    }

    // If position has not changed
    if (clickCounter && clickPosition.x == mousePosition.x && clickPosition.y == mousePosition.y) {
        clickCounter++;
        if (clickCounter == 2) {
            // Do something on double click
        } else {
            // Do something on triple click
            resetClick();
        }
        conserveClick();
    } else {
        // Do something on single click
        conserveClick();
    }
});

var clicks = 0;
var timer, timeout = 350; // time between each click

var doubleClick = function(e) {
  console.log('doubleClick');
}

var tripleClick = function(e) {
  console.log('tripleClick');
}

// click timer
yourcontainer.addEventListener('click', function(e) {
  clearTimeout(timer);
  clicks++;
  var evt = e;
  timer = setTimeout(function() {
    if(clicks==2) doubleClick(evt);
    if(clicks==3) tripleClick(evt);
    clicks = 0;
  }, timeout);
});