javascript - eventos - ondblclick

Evita que el evento de clic se dispare cuando se dispara el evento dblclick

Question

Estoy manejando el evento click y dblclick en un elemento DOM. Cada uno ejecuta un comando diferente, pero encuentro que al hacer doble clic en el elemento, además de disparar el evento de doble clic, el evento de clic también se activa dos veces. ¿Cuál es el mejor enfoque para prevenir este comportamiento?

Answer 1

En caso de que alguien más se tropiece con esto (como yo lo hice) en busca de una respuesta, la mejor solución que podría encontrar es la siguiente:

    $node.on(''click'',function(e){
      if(e.originalEvent.detail > 1){
         return;
        /* if you are returning a value from this
         function then return false or cancel 
         the event some other way */
      }
    });

Hecho. Si hay más de un clic atrás para atrás, el segundo, tercero, etc. no disparará Definitivamente prefiero esto a usar cualquier tipo de temporizadores.

Me apunte en esta dirección leyendo this .

Por cierto: primero estaba investigando este problema porque accidentalmente hice doble clic en un enlace paginado, y el evento se activó y finalizó dos veces antes de que pudiera producirse la devolución de llamada.

Antes de subir con el código anterior, tuve

 if e.originalEvent.detail === 2 //return

Sin embargo, pude hacer clic en el enlace 3 veces (un triple clic), y aunque el segundo clic no se disparó, el tercero sí lo hizo.

Answer 2

En este caso, es mejor retrasar ligeramente la ejecución del evento de un solo clic. Haga que su controlador de doble clic establezca una variable que verificará el evento de un solo clic. Si esa variable tiene un valor particular, podría ser boolDoubleClick == true , entonces no fire/handle el solo clic.

Answer 3

En un comentario, usted dijo:

Retraso el controlador de clic en 300 ms (un retraso notable y molesto) e incluso ...

Entonces, suena como que lo que quieres es que cuando haces clic, el DOM debería generar un evento de clic inmediatamente, excepto que si el clic es el primer clic de un doble clic.

Para implementar esta función, cuando haga clic, el DOM tendrá que poder predecir si se trata del último clic o si es el primero de un doble clic (sin embargo, no creo que sea posible en general que el DOM prediga) si el usuario está a punto de hacer clic de nuevo).

¿Cuáles son las dos acciones distintas que intenta realizar al hacer clic y hacer doble clic? OMI, en una aplicación normal es posible que desee ambos eventos: por ejemplo, un solo clic para enfocar un elemento y luego hacer doble clic para activarlo.

Cuando debe separar los eventos, algunas aplicaciones usan algo más que hacer doble clic: por ejemplo, usan el botón derecho o el botón de control.

Answer 4

Esto es lo que hice para distinguir dentro de un módulo.

var pendingClick = 0;

function xorClick(e) {
    // kill any pending single clicks
    if (pendingClick) {
        clearTimeout(pendingClick);
        pendingClick = 0;
    }

    switch (e.detail) {
        case 1:
            pendingClick = setTimeout(function() {
                console.log(''single click action here'');
            }, 500);// should match OS multi-click speed
            break;
        case 2:
            console.log(''double click action here'');
            break;
        default:
            console.log(''higher multi-click actions can be added as needed'');
            break;
    }
}

myElem.addEventListener(''click'', xorClick, false);

Answer 5

Gracias a todas las otras respuestas aquí, ya que la combinación de ellas parece proporcionarme una solución razonable cuando la interacción requiere ambas, pero se excluyen mutuamente:

       node.on(''click'', function(e) {

            //Prepare for double click, continue to clickHandler doesn''t come soon enough
            console.log("cleared timeout in click",_this.clickTimeout);
            clearTimeout(_this.clickTimeout);
            _this.clickTimeout = setTimeout(function(){
                console.log("handling click");
                _this.onClick(e);
            },200);
            console.log(_this.clickTimeout);
        });

        node.on(''dblclick'', function (e) {

            console.log("cleared timeout in dblclick",_this.clickTimeout);
            clearTimeout(_this.clickTimeout);
            // Rest of the handler function

Actualización: Agregué una versión generalizada de este enfoque junto con un polyfill para dispositivos táctiles en este repositorio de Github con ejemplos:

https://github.com/mckamey/doubleTap.js

Answer 6

Los eventos de nivel 2 de AFAIK DOM no especifican para hacer doble clic. No funciona para mí en IE7 (hay un shock), pero FF y Opera no tienen problemas para administrar la especificación, donde puedo adjuntar todas las acciones al evento de clic, pero para hacer doble clic solo espere hasta que aparezca el atributo "detalle" del objeto de evento es 2. De la documentación: "Si se producen varios clics en la misma ubicación de la pantalla, la secuencia se repite con el atributo de detalle que se incrementa con cada repetición".

Answer 7

Puede usar UIEvent.detail si desea detectar cuántas veces se hizo clic en el elemento y disparar eventos basados ​​en eso.

Un ejemplo simple:

element.addEventListener("click", function (e) {
  if (e.detail === 1) {
    // do something if the element was clicked once.
  } else if (e.detail === 2) {
    // do something else if the element was clicked twice
  }
});

Answer 8

Sé que esto es viejo como demonios, pero pensé que de todos modos me gustaría publicar ya que me encontré con el mismo problema. Así es como lo resolví.

 $(''#alerts-display, #object-display'').on(''click'', [''.item-data-summary'', ''.item-marker''], function(e) {
    e.preventDefault();

    var id;

    id = setTimeout(() => {
       // code to run here
       return false;
    }, 150);

    timeoutIDForDoubleClick.push(id);
});


$(''.panel-items-set-marker-view'').on(''dblclick'', [''.summary'', ''.marker''], function(e) {
    for (let i = 0; i < timeoutIDForDoubleClick.length; i++) {
       clearTimeout(timeoutIDForDoubleClick[i]);
    }

    // code to run on double click

    e.preventDefault();
});