Evento “tab” / “tap” en jQuery

Hace unas semanas que empecé el desarrollo de una aplicación para iPhone, iPad, Android y web. Será una aplicación web compilada con Phonegap y que aparentará ser nativa. En principio se iba a utilizar el framework jQuery Mobile para agilizar el desarrollo, pero después de unos días de trabajo vi que quizá no era lo más adecuado y que la librería puede que no estuviera suficientemente madura (aún era Alpha) como para usarla en un proyecto así, de manera que se tiró para atrás la idea. Pensé que sería mejor hacer un desarrollo “desde 0” con jQuery a secas.

El primer tropezón fue con el scroll. Parece una tonteria, algo que se solucionaría con 2 palabras en cualquier navegador ha llevado semanas de pruebas, dolores de cabeza y malas ideas. Ahora que parece que este tema está más o menos solucionado (ya escribiré sobre esto) me encuentro con otro: tenemos una lista con elementos seleccionables, pero después del uso de librerías para scroll y con lo dificil que lo pone Safari Mobile, no se podía hacer click en los elementos de la lista, el evento no se reconocía.

Ahora habría que utilizar un plugin para detectar los “tab” o “tap”, los toques en pantallas táctiles. El plugin es este:

jQuery.event.special.tabOrClick = {
	setup: function (data, namespaces){
		var elem = this, $elem = jQuery(elem);
		if(window.Touch){
			$elem.bind('touchstart', jQuery.event.special.tabOrClick.onTouchStart);
			$elem.bind('touchmove', jQuery.event.special.tabOrClick.onTouchMove);
			$elem.bind('touchend', jQuery.event.special.tabOrClick.onTouchEnd);
		}else{
			$elem.bind('click', jQuery.event.special.tabOrClick.click);
		}
	},
	click: function (event) {
		event.type = "tabOrClick";
		jQuery.event.handle.apply(this, arguments);
	},
	teardown: function (namespaces) {
		if(window.Touch){
			$elem.unbind('touchstart', jQuery.event.special.tabOrClick.onTouchStart);
			$elem.unbind('touchmove', jQuery.event.special.tabOrClick.onTouchMove);
			$elem.unbind('touchend', jQuery.event.special.tabOrClick.onTouchEnd);
		}else{
			$elem.unbind('click', jQuery.event.special.tabOrClick.click);
		}
	},
	onTouchStart: function (e) {
		this.moved = false;
	},
	onTouchMove: function (e) {
		this.moved = true;
	},
	onTouchEnd: function (event) {
		if (!this.moved) {
			event.type = "tabOrClick";
			jQuery.event.handle.apply(this, arguments)
		}
	}
};

Y para usarlo, sólo hay que incluir ese código en un archivo e incluirlo como plugin o copiarlo directamente al código javascript. Luego cuando se quiera utilizar:

$("#elemento").live("tabOrClick",function(){
	/* cosas */
	return false;
});

Visto en Stackoverflow.




Josep Viciana

Programador de 27 años con una década de experiencia como programador. interesado en el diseño, ilustración y nuevas tecnologías. Dedicado desde siempre a la programación Web y desde hace algunos años también a la móvil.

1 comentario

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *