Pregunta ¿cómo diferenciar el evento de un solo clic y el evento de doble clic?


Tengo un solo botón en li con id "my_id". Os adjunto two jquery eventos con este elemento

1.  $("#my_id").click(function() { 
            alert('single click');
    });

2.   $("#my_id").dblclick(function() {
              alert('double click');
    });

Pero cada vez que me da la single click


76
2018-03-31 08:24


origen


Respuestas:


Debe usar un tiempo de espera para verificar si hay otro clic después del primer clic.

Aquí está el truco:

// Author:  Jacek Becela
// Source:  http://gist.github.com/399624
// License: MIT

jQuery.fn.single_double_click = function(single_click_callback, double_click_callback, timeout) {
  return this.each(function(){
    var clicks = 0, self = this;
    jQuery(this).click(function(event){
      clicks++;
      if (clicks == 1) {
        setTimeout(function(){
          if(clicks == 1) {
            single_click_callback.call(self, event);
          } else {
            double_click_callback.call(self, event);
          }
          clicks = 0;
        }, timeout || 300);
      }
    });
  });
}

Uso:

$("button").single_double_click(function () {
  alert("Try double-clicking me!")
}, function () {
  alert("Double click detected, I'm hiding")
  $(this).hide()
})
<button>Click Me!</button>

EDITAR:

Como se indica a continuación, prefiere usar el nativo dblclick evento: http://www.quirksmode.org/dom/events/click.html

O el proporcionado por jQuery: http://api.jquery.com/dblclick/


44
2018-03-31 08:30



El comportamiento de dblclick evento se explica en En modo capricho.

El orden de los eventos para un dblclick es:

  1. ratón hacia abajo
  2. mouseup
  3. hacer clic
  4. ratón hacia abajo
  5. mouseup
  6. hacer clic
  7. dblclick

La única excepción a esta regla es (por supuesto) Internet Explorer con su orden personalizado de:

  1. ratón hacia abajo
  2. mouseup
  3. hacer clic
  4. mouseup
  5. dblclick

Como puede ver, escuchar ambos eventos juntos en el mismo elemento dará lugar a llamadas adicionales a su click entrenador de animales.


67
2018-04-01 09:30



Una función simple. No se requiere jquery u otro marco. Pase sus funciones como parámetros

<div onclick="doubleclick(this, function(){alert('single')}, function(){alert('double')})">click me</div>
    <script>
        function doubleclick(el, onsingle, ondouble) {
            if (el.getAttribute("data-dblclick") == null) {
                el.setAttribute("data-dblclick", 1);
                setTimeout(function () {
                    if (el.getAttribute("data-dblclick") == 1) {
                        onsingle();
                    }
                    el.removeAttribute("data-dblclick");
                }, 300);
            } else {
                el.removeAttribute("data-dblclick");
                ondouble();
            }
        }
    </script>

16
2018-04-16 09:16



Me temo que el comportamiento depende del navegador:

No es aconsejable vincular controladores a   tanto el clic como los eventos dblclick para   el mismo elemento. La secuencia de   los eventos desencadenados varían desde el navegador   al navegador, con algunos que reciben dos   haga clic en eventos antes de la doble pulsación y   otros solo uno. Haga doble clic   sensibilidad (tiempo máximo entre   clics que se detectan como un doble   click) puede variar según el sistema operativo   y navegador, y es a menudo   configurable por el usuario.

http://api.jquery.com/dblclick/

Ejecutando su código en Firefox, la alerta () en el click() controlador evita que haga clic por segunda vez. Si elimina dicha alerta, obtendrá ambos eventos.


12
2018-03-31 08:30



Bueno, para hacer doble clic (haga clic dos veces) primero debe hacer clic una vez. los click() el manejador dispara en su primer clic, y como la alerta aparece, no tiene la posibilidad de hacer el segundo clic para disparar el dblclick() entrenador de animales.

Cambia tus manejadores para hacer algo más que un alert() y verás el comportamiento. (quizás cambie el color de fondo del elemento):

$("#my_id").click(function() { 
    $(this).css('backgroundColor', 'red')
});

$("#my_id").dblclick(function() {
    $(this).css('backgroundColor', 'green')
});

8
2018-03-31 08:29



Ninguna de estas respuestas satisfizo mis necesidades, así que creé una solución inspirada en la esencia publicada por @AdrienSchuler. Utilice esta solución solo cuando desee vincular un solo clic Y un doble clic en un elemento. De lo contrario, recomiendo usar el nativo click y dblclick oyentes

Estas son las diferencias:

  • Vanillajs, sin dependencias
  • No esperes en el setTimeout para manejar el controlador de clic o doble clic
  • Al hacer doble clic en él, primero se dispara el controlador de clic, luego el controlador de doble clic

Javascript:

function makeDoubleClick(doubleClickCallback, singleClickCallback) {
    var clicks = 0, timeout;
    return function() {
        clicks++;
        if (clicks == 1) {
            singleClickCallback && singleClickCallback.apply(this, arguments);
            timeout = setTimeout(function() { clicks = 0; }, 400);
        } else {
            timeout && clearTimeout(timeout);
            doubleClickCallback && doubleClickCallback.apply(this, arguments);
            clicks = 0;
        }
    };
}

Uso:

var singleClick = function(){ console.log('single click') };
var doubleClick = function(){ console.log('double click') };
element.addEventListener('click', makeDoubleClick(doubleClick, singleClick));

Debajo está el uso en un jsfiddle, el botón jQuery es el comportamiento de la respuesta aceptada.

jsfiddle


5
2017-10-10 09:59



Otra solución simple de Vanilla basada en A1rPun respuesta (ver su violín para la solución jQuery, y ambos están en éste)

Parece que para NO activar un controlador de un solo clic cuando el usuario hace doble clic, el controlador de un solo clic se activa necesariamente después de un retraso ...

var single = function(e){console.log('single')},
    double = function(e){console.log('double')};

var makeDoubleClick = function(e) {

  var clicks = 0,
      timeout;

  return function (e) {

    clicks++;

    if (clicks == 1) {
      timeout = setTimeout(function () {
        single(e);
        clicks = 0;
      }, 250);
    } else {
      clearTimeout(timeout);
      double(e);
      clicks = 0;
    }
  };
}
document.getElementById('btnVanilla').addEventListener('click', makeDoubleClick(), false);

4
2018-03-22 17:08



Aquí hay una alternativa del código de jeum para una cantidad arbitraria de eventos:

 var multiClickHandler = function (handlers, delay) {
    var clicks = 0, timeout, delay = delay || 250;
    return function (e) {
      clicks++;
      clearTimeout(timeout);
      timeout = setTimeout(function () {
        if(handlers[clicks]) handlers[clicks](e);
        clicks = 0;
      }, delay);
    };
  }

  cy.on('click', 'node', multiClickHandler({
    1: function(e){console.log('single clicked ', e.cyTarget.id())},
    2: function(e){console.log('double clicked ', e.cyTarget.id())},
    3: function(e){console.log('triple clicked ', e.cyTarget.id())},
    4: function(e){console.log('quadro clicked ', e.cyTarget.id())},
    // ...
  }, 300));

Necesitó esto para un cytoscape.js aplicación


3
2018-05-04 16:43