Construyendo un verdadero triple click con jQuery

6 COMENTARIOS  -  01/04/2009 -  Clasificado en: ,

En Ajaxian me he encontrado un interesante artículo denominado "Building a triple click" en el que se hace mención al código creado por Brandon Aaron para, ayudado por jQuery, asignar un evento al triple click de un elemento. La verdad es que resulta interesante no restringir la llamada de acciones únicamente al click o el doble click. El código sería: 

jQuery.event.special.tripleclick = {
    setup: function(data, namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.bind('click', jQuery.event.special.tripleclick.handler);
    },
    teardown: function(namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.unbind('click', jQuery.event.special.tripleclick.handler);
    },
    handler: function(event) {
        var elem = this,
	$elem = jQuery(elem),
	clicks = $elem.data('clicks') || 0;
        clicks += 1;
        if ( clicks === 3 ) {
            clicks = 0;
            event.type = "tripleclick";
            jQuery.event.handle.apply(this, arguments)
        }
        $elem.data('clicks', clicks);
    }
};

Y una posible llamada podría ser: 

$(document).ready(function() {
   $('#ejemplo').bind('tripleclick', function(event) {
   alert('TRES CLICKS!!!!!');
  });
});

Ver ejemplo en funcionamiento » »

El problema del script es que no importa cuanto tiempo se tarde en acumular los tres clicks. Puede haber un minuto entre click y click, que al sumar tres el evento se desencadenará. De un modo similar a un código que utilicé para simular un doble click en Flash, he modificado el código original para construir un evento que se desencadene cuando se cumpla un verdadero click. El ejemplo toma un intervalo máximo entre click y click de 500 milisegundos pero éste es fácilmente personalizable. El código resultante sería: 

jQuery.event.special.tripleclick = {
    setup: function(data, namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.bind('click', jQuery.event.special.tripleclick.handler);
    },
    teardown: function(namespaces) {
        var elem = this, $elem = jQuery(elem);
        $elem.unbind('click', jQuery.event.special.tripleclick.handler);
    },
    handler: function(event) {
        var elem = this,
	$elem = jQuery(elem),
	clicks = $elem.data('clicks') || 0;
	//Averiguamos cuando fue el click anterior
	ClickAnterior = $elem.data('ClickTiempo') || 0;
	//Extraemos el tiempo de este click	
	var d = new Date();
	var ClickTiempo=d.getTime();
	//Comparamos a ver si han pasado 500 milisegundos
	if (ClickTiempo <= (ClickAnterior + 500)) {
		//si no han pasado, sumamos un click
		clicks += 1;
	}else{
		//si han pasado 500 milisegundos
		//reiniciamos el contador a uno
		clicks = 1;
	}
	$('#ejemplo').html('Clicks: '+clicks);
       if ( clicks === 3 ) {
            clicks = 0;
            event.type = "tripleclick";
            jQuery.event.handle.apply(this, arguments)
        }
        $elem.data('clicks', clicks);
        $elem.data('ClickTiempo', ClickTiempo);
    }
};

Ver ejemplo en funcionamiento » »

Si te ha gustado, puedes compartir este post en...
Posts Relacionados
Comentarios
Comentario realizado el 01/04/2009
Andrés Fernández Interesante. Una vez tuve que hacer algo así para simular doble click en Ópera (en ese momento no soportaba ese evento).
Lástima que seas tan fanático de jQuery: mootools está más de acuerdo con la elegancia que demostrás en todo lo que hacés ;)
Comentario realizado el 02/04/2009
Francisco Empecé con jQuery y me resulta bastante cómodo. He utilizado alguna cosilla en Mootools aunque no lo controlo demasiado. La verdad es que me gustaría meterme más a fondo porque las referencias son muy buenas, pero al final la todo se reduce a que hay muchas cosas que hacer y que aprender y muy poco tiempo.


Saludos.
Comentario realizado el 14/04/2009
Javier Martinez Cuál sería la utilidad de un triple click, mostrar un aviso con algo como "No reclikees mi web!!!" lo podria utilizar como un captcha...
Comentario realizado el 15/04/2009
Francisco En una página web no le veo mucho sentido. Lo que tienes que tener en cuenta es que, cada vez más, aplicaciones de gestión que antes eran de escritorio ahora se ejecutan desde el navegador. En ese caso si que tiene cabida tener un evento más que poder invocar.


Saludos.
Comentario realizado el 05/07/2009
Cristian Giménez Eso me va a servir mucho a mi :)
Gracias

Saludos.
Comentario realizado el 09/08/2009
Jorge del Casar Yo también vi el artículo de ajaxian y no me convenció por lo mismo que tu dices. Y este está bastante mejor, pero te reto a que añadas la funcionalidad de que los 3 clicks sean seguidos sobre el mismo elemento.

Prueba a hacer click dentro y fuera del cuadro repetidas veces ;)

Enhorabuena por tu script!
Deja un comentario

¡Gracias por dejar tu opinión! Por favor procura que tu comentarios sean apropiados respecto al tema tratado en la entrada; que no sean spam, u ofensivos, de otro modo, serán eliminados. Todos los comentarios serán moderados antes de su publicación por lo que su aparición en la web puede verse aplazada un cierto tiempo. Si deseas realizar algún comentario, crítica o sugerencia sobre la propia web puedes hacer a través de la siguiente dirección de correo: webintenta@webintenta.com