Detectar el doble click con jQuery

Publicada el por

Vamos a mostrar el código necesario para detectar el doble click con jQuery.

Tutorial jquery
Tutorial jquery

Ya vimos en un artículo anterior, como evitar un doble click en un botón. Ahora veremos cómo actuar, ejecutar código cuando se hace doble click en un botón.

Código HTML

Este sería el código que crea el botón.

<input type="button" value="Double Click" id="btn_doubleclick" />

<div id="console"></div>

Como podéis ver, tiene una ID asignada para poder trabajar con el botón.

Detectar doble click botón

Ahora, veamos el código que detecta el doble click en un botón. Más concretamente, en el botón que hemos creado:

var clicks = 0;
$('#btn_doubleclick').dblclick(function(e){
  e.preventDefault();
  $('#console').html("Hi "+ clicks);
  clicks++;
});

Podéis comprobar que al hacer doble click sobre el botón, escribimos texto en el bloque div que hemos creado.

Detectar doble click en toda la web

Una vez hemos visto cómo detectar el doble click en un botón, veamos el código para detectar cuando hacemos doble click en cualquier parte de la página web:

var clicks = 0;
$('*').dblclick(function(e){
  e.preventDefault();
  $('#console').html("Hi "+ clicks);
  clicks++;
});

Como podéis ver, el cambio está en $(‘*’). Eso hace que jQuery capture el evento de doble click en cualquier elemento.

En acción

Ahora vemos el código en acción

See the Pen jQuery Detect Double Click by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.

Espero que estos sencillos ejemplos os sirvan para detectar el doble click con jQuery, ya sea en un botón o en cualquier parte de la web.

Más información