11054 Suscriptores al Feed del Blog
93 Suscriptores al Feed de Anotaciones Breves
33 usuarios online
diseño web valencia en 500 iconos gratuitos para tus aplicaciones web
Construyendo un verdadero triple click con jQuery
4 COMENTARIOS - Publicado hace 11 meses - Clasificado en: JQUERY, TUTORIALESEn 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 » »
Algunas entradas relacionadas:
- Exportar tablas HTML a Excel con PHP y JQuery
- Autotab: plugin de jQuery para auto-tabulación y filtrado de campos
- Filtro :random con jQuery
- Cambiar propiedades CSS con JQuery
- Rollover sobre imágenes con jQuery
- Crear cajas de mensajes con CSS y jQuery
- Ajax con jQuery: el método load()
También te puede interesar:
Bienvenido a Intenta. Has venido desde ; si andabas buscando algo espero que este post satisfaga tus expectativas.
|
|
|
|
|
COMENTARIOS
 |
Publicado hace 11 meses Andrés Fernández - http://www.disegnocentell.com.ar 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 ;) |
 |
Publicado hace 11 meses Francisco - http://www.webintenta.com 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. |
 |
Publicado hace 11 meses Javier Martinez - http://www.publicacionesdigitales.net 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... |
|
|
Publicado hace 11 meses Francisco - http://www.webintenta.com 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. |
 |
Publicado hace 8 meses Cristian Giménez - http://www.tripl3click.com Eso me va a servir mucho a mi :) Gracias Saludos. |
 |
Publicado hace 7 meses Jorge del Casar - http://jorgedelcasar.es 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! |
