jQuery dblclick(): Controlar y detectar el doble click en elementos del DOM

Vamos a detectar y controlar con jQuery dblclick() los doble clicks del ratón en los elementos de nuestra web (DOM). Tened cuidado cuando en el mismo elemento usáis la función click(), puede ocasionar problemas a la hora de controlar los clicks.

Cuando se hace un doble click en un input text para seleccionar texto se puede detectar dicha acción con la función select().

Sintaxis de jQuery dblclick()

Os pongo la sintaxis de esta función de jQuery extraída de su web oficial:

$(elemento).dblclick(funcion)

Os comento los parámetros a pasar:

• elemento (Obligatorio): Es la etiqueta, id, clase en la que queremos controlar el doble click del ratón.
• funcion (Opcional): Función callback que queremos que se ejecute cuando se detecte la acción.

Ejemplo de jQuery dblclick()

He realizado este ejemplo de jQuery dblclick() en el cual vamos a clickar diferentes elementos de una web:

$(document).ready(function(){
 $("#parrafo").dblclick(function(){
    alert("has hecho doble click en el párrafo con id=parrafo");
 });
});

En el código superior podemos ver que…

• Detectamos el doble click de un elemento con id = parrafo.
• Sacamos un alert por pantalla indicando la acción.

El código HTML del párrafo es el siguiente:

<p id="parrafo">Texto de párrafo <span> Texto dentro de un span</span>.</p>

Si queremos detectar los doble clicks en otros elementos debemos usar otros selectores de jQuery como ‘.nombreclase’ o etiquetas HTML.

Otras funciones para detectar los eventos del ratón

• Funciones de jQuery para detectar las acciones del ratón

Selectores de jQuery

Para la detección, control o selección de elementos con jQuery os recomiendo leer este post:

• jQuery selectors: Cómo seleccionar o controlar elementos del DOM