destacados

Gabriel Da Silva

Portafolio del ilustrador y director de arte brasileño, aunque afincado en Madrid, Gabriel Da Silva.

B&W Helmut Newton

Selección de fotografías en blanco y negro de uno de los fotógrafos más conocidos de las últimas décadas, Helmut Newton.

Judith Erwes

Fotógrafa afincada en Londres con un estilo que combina la moda, el humor y la estética retro.

Jody Rogac

Nacida en Inglaterra y criada en Canadá, Jody Rogac en la actualidad vive y trabaja en Brooklyn. Sus trabajo ha obtenido diversos galardones.

Publicaciones

Construyendo un verdadero triple click con jQuery

, 01/04/2009 16:40:27

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 » »

Páginas: 1
comentarioscomentarios