Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>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 <code>event.detail</code>, which the <a href="https://developer.mozilla.org/en-US/docs/Web/Events/click#Properties">MDN documentation describes as</a>:</p> <blockquote> <p>A count of consecutive clicks that happened in a short amount of time, incremented by one.</p> </blockquote> <p>This means you can simply check the value of this property and see if it is <code>3</code>:</p> <pre><code>window.addEventListener('click', function (evt) { if (evt.detail === 3) { alert('triple click!'); } }); </code></pre> <blockquote> <p><strong>Working demo: <a href="http://jsfiddle.net/L6d0p4jo/">http://jsfiddle.net/L6d0p4jo/</a></strong></p> </blockquote> <hr> <p>If you need support for IE 8, the best approach is to capture a double-click, followed by a triple-click &mdash; something like this, for example:</p> <pre><code>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(); } }); </code></pre> <blockquote> <p><b>Working demo: <a href="http://jsfiddle.net/YDFLV/">http://jsfiddle.net/YDFLV/</a> </b></p> </blockquote> <p>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 <code>attachEvent</code> in place of <code>addEventListener</code> for IE 8.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload