Ejemplo de evento dblclick - I

El evento doble-clic se produce cuando se realizan dos clic seguidos sobre un mismo elemento. Todos conocemos lo que es un doble clic, por lo que no necesitamos muchas más explicaciones, no obstante, tenemos que saber que cuando se produce un evento doble-clic al mismo tiempo se están produciendo eventos clic (uno por cada uno de los 2 clic del doble-clic). Para aclarar este asunto hemos hecho el siguiente ejemplo. Tenemos una capa, en la que se puede hacer doble-clic, pero que también tiene definido un evento clic. Entonces, al hacer un doble clic podremos comprobar que se producen dos eventos clic y después un doble-clic. 

Este es el código HTML con el que vamos a trabajar:

<div id="micapa" style="padding: 10px; background-color: #ffcc99; width: 150px; float: left;">Hazme

dobleclick</div>

<div id="mensaje" style="padding: 10px; margin-left: 180px;">Aquí voy a colocar mensajes para que

los leas...</div>

Para poder saber cuántos clics y dobles clic que se realizan, vamos a crear un par de variables Javascript para contarlos.

var numClics = 0;

var numDobleClics = 0;

Ahora veamos la programación del evento clic:

$("#micapa").click(function(e){

numClics++;

$("#mensaje").html("Clic " + numClics);

})

Con $("#micapa") obtenemos el objeto jQuery de la capa donde hay que hacer clic. Con el método click() sobre ese objeto jQuery creamos el evento clic y la función que pasamos como parámetro contiene el código a ejecutar cuando se hace clic. Se trata simplemente acumular 1 en la variable que cuenta los clics y luego se muestra un texto en la capa de los mensajes. La programación del evento para el doble clic se puede ver a continuación:

$("#micapa").dblclick(function(e){

numDobleClics++;

$("#mensaje").html("Doble Clic " + numDobleClics);

});

Como se puede ver, es un código muy similar al anterior. Simplemente que se define el evento con el método dblclick(). En el código del evento acumulamos esta vez 1 en la variable que cuenta el número de dobles clic. 

Luego en el mensaje mostramos el número de doble-clic. Con ello, al hacer clic o doble-clic se mostrará el mensaje para ver la cuenta de clics y dobles clic realizados y podremos comprobar que siempre se producen dos clics antes de cualquier doble clic.