How do I listen for triple clicks in JavaScript?

Question

If this is for a double-click:

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

How can I capture a triple-click? This is for a pinned tab in Google Chrome.

Answer 1

You need to write your own triple-click implementation because no native event exists to capture 3 clicks in a row. Fortunately, modern browsers have event.detail, which the MDN documentation describes as:

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

This means you can simply check the value of this property and see if it is 3:

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

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

---

If you need support for IE 8, the best approach is to capture a double-click, followed by a triple-click — something like this, for example:

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/

The reason for this is that old IE browsers will not fire two consecutive click events for a double click. Don't forget to use attachEvent in place of addEventListener for IE 8.