How do I listen for triple clicks in JavaScript?

Solution 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.

Solution 2:

Since DOM Level 2 you could use mouse click handler and check the detail parameter of event which should be interpreted as:

The detail attribute inherited from UIEvent indicates the number of times a mouse button has been pressed and released over the same screen location during a user action. The attribute value is 1 when the user begins this action and increments by 1 for each full sequence of pressing and releasing. If the user moves the mouse between the mousedown and mouseup the value will be set to 0, indicating that no click is occurring.

So the value of detail === 3 will give you the triple-click event.

More information in specification at http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent.

Thanks to @Nayuki https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail - a DOM3 extension which is WIP https://w3c.github.io/uievents/

Solution 3:

Here is the real Triple click event, which triggers only when all of three clicks fired with equal interval.

// Default settings
var minClickInterval = 100,
    maxClickInterval = 500,
    minPercentThird = 85.0,
    maxPercentThird = 130.0;

// Runtime
var hasOne = false,
    hasTwo = false,
    time = [0, 0, 0],
    diff = [0, 0];

$('#btn').on('click', function() {
    var now = Date.now();
    
    // Clear runtime after timeout fot the 2nd click
    if (time[1] && now - time[1] >= maxClickInterval) {
        clearRuntime();
    }
    // Clear runtime after timeout fot the 3rd click
    if (time[0] && time[1] && now - time[0] >= maxClickInterval) {
        clearRuntime();
    }
    
    // Catch the third click
    if (hasTwo) {
        time[2] = Date.now();
        diff[1] = time[2] - time[1];
        
        var deltaPercent = 100.0 * (diff[1] / diff[0]);
        
        if (deltaPercent >= minPercentThird && deltaPercent <= maxPercentThird) {
            alert("Triple Click!");
        }
        clearRuntime();
    }
    
    // Catch the first click
    else if (!hasOne) {
        hasOne = true;
        time[0] = Date.now();
    }
    
    // Catch the second click
    else if (hasOne) {
        time[1] = Date.now();
        diff[0] = time[1] - time[0];
        
        (diff[0] >= minClickInterval && diff[0] <= maxClickInterval) ?
            hasTwo = true : clearRuntime();
    }  
});

var clearRuntime = function() {
    hasOne = false;
    hasTwo = false;
    time[0] = 0;
    time[1] = 0;
    time[2] = 0;
    diff[0] = 0;
    diff[1] = 0;
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click button three times with equal interval
<button id="btn">Click me</button>

Also, I wrote jquery plugin TrplClick, which enables 'trplclick' event

Solution 4:

pseudo-code:

var clicks = 0

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