Comment écouter pour un triple clic en JavaScript?

Vous devez écrire votre propre implémentation à triple clic car aucun événement natif n'existe pour capturer 3 clics d'affilée. Heureusement, les navigateurs modernes ont event.detail , que la documentation MDN décrit comme event.detail :

Un nombre de clics consécutifs qui s'est produit dans un court laps de temps, augmenté d'un.

Cela signifie que vous pouvez simplement vérifier la valeur de cette propriété et voir si c'est 3 :

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

Démonstration de travail: http://jsfiddle.net/L6d0p4jo/

Si vous avez besoin de support pour IE 8, la meilleure approche est de capturer un double-clic, suivi d'un triple clic – quelque chose comme ceci, par exemple:

 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(); } }); 

Démonstration de travail: http://jsfiddle.net/YDFLV/

La raison en est que les anciens navigateurs IE ne déclencheront pas deux événements de clic consécutifs pour un double clic. N'oubliez pas d'utiliser attachEvent à la place de addEventListener pour IE 8.

Depuis DOM Level 2, vous pouvez utiliser le gestionnaire de clic de souris et vérifier le paramètre de detail de l'événement qui doit être interprété comme suit:

L'attribut de détail hérité de UIEvent indique le nombre de fois qu'un bouton de souris a été pressé et relâché sur le même emplacement d'écran lors d'une action utilisateur. La valeur de l'attribut est 1 lorsque l'utilisateur commence cette action et augmente de 1 pour chaque séquence complète de pressage et de relâchement. Si l'utilisateur déplace la souris entre le mousedown et la souris, la valeur sera définie sur 0, ce qui indique qu'aucun clic ne se produit.

Donc, la valeur du detail === 3 vous donnera l'événement à triple clic.

Plus d'informations dans les spécifications à http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent .

Voici le véritable événement Triple Click, qui déclenche uniquement lorsque tous les trois clics ont été déclenchés avec un intervalle égal.

 // 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> 

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

Je travaille sur un éditeur de code javascript et j'ai dû écouter le triple clic et voici la solution qui fonctionnera pour la plupart des navigateurs:

 // 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(); } }); 

Testé sur Firefox 12, Google Chrome 19, Opera 11.64, Internet Explorer 9

Cette approche vérifie si l'utilisateur n'a pas changé la position du curseur, vous pouvez toujours faire quelque chose lorsque vous avez un clic ou double-clic. J'espère que cette solution aidera tout le monde qui devra implémenter un écouteur d'événement à triple clic 🙂