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.