¿Cómo puedo escuchar clics triples en JavaScript?

Question

Si se trata de un doble clic:

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

Como puedo capturar un triple clic? Esto es para una pestaña anclada en Google Chrome.

Answer 1

var clicks = 0 

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

Answer 2

Debe escribir su propia implementación de triple clic porque no existe un evento nativo para capturar 3 clics en una fila. Afortunadamente, los navegadores modernos tienen event.detail, que la MDN documentation describes as:

Un recuento de clics consecutivos que ocurrieron en un corto período de tiempo, incrementado en uno.

Esto significa que basta con comprobar el valor de esta propiedad y ver si es 3:

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

demostración de trabajo: http://jsfiddle.net/L6d0p4jo/

---

Si necesita soporte para IE 8, el mejor enfoque es capturar un dou ble-clic, seguido de un triple clic — algo como esto, por ejemplo:

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

demostración de trabajo: http://jsfiddle.net/YDFLV/

La razón de esto es que los viejos navegadores IE no lo hará disparar dos eventos de clic consecutivos para un doble clic. No se olvide de utilizar attachEvent en lugar de addEventListener para IE 8.

Answer 3

estoy trabajando en un editor de código Javascript y tuve que escuchar para el triple clic y aquí está la solución que funcione para la mayoría de los navegadores:

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

Probado en Firefox 12, Google Chrome 19, Opera 11.64, Internet Explorer 9

Este enfoque comprueba si el usuario no ha cambiado la posición del cursor, todavía se puede hacer algo cuando se tiene solo clic o doble clic. Espero que esta solución ayudará a todo el mundo que se necesita para implementar un detector de eventos triple hace clic :)

Answer 4

Desde DOM Nivel 2 se podría utilizar el ratón clic manejador y comprobar el parámetro detail del evento que debe ser interpretada como:

El atributo detail heredado de UIEvent indica el número de veces que se presionó y soltó un botón del mouse sobre la misma ubicación de pantalla durante una acción del usuario. El valor del atributo es 1 cuando el usuario comienza esta acción e incrementa en 1 para cada secuencia completa de presionar y soltar. Si el usuario mueve el mouse entre el mousedown y el mouseup, el valor se establecerá en 0, lo que indica que no se está haciendo clic.

Así que el valor de detail === 3 le dará el evento de triple clic.

Más información en la especificación en http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent.

Answer 5

Este es el evento Triple clic real, que se activa solo cuando los tres clics se activan con el mismo intervalo.

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

Además, escribí jquery plugin TrplClick, que permite evento 'trplclick'