jquery touchstart en el navegador

Question

Como touchstart/touchend aún no es compatible con la mayoría de los navegadores de escritorio. ¿Cómo puedo crear el evento touchstart que será el mismo que el evento mousedown (que es compatible con todos los navegadores)?

Quiero algo como esto

$('obj').bind('touchstart', function(e){ 
}); 

se traducirá en

$('obj').bind('mousedown', function(e){ 
}) 

Answer 1

Puede enlazar dos a la vez ...

$('obj').bind('touchstart mousedown', function(e){ 
}); 

Si quieren mousedown evento para disparar touchstart eventos automáticamente (por lo que solo tiene que enlazar touchstart) utilizar ...

$(document).bind('mousedown', function(event) { 
    $(event.target).trigger('touchstart'); 
}); 

Tenga en cuenta que esto significa mousedown eventos deben propagar a document antes de la costumbre touchstart evento puede ser activado. Esto podría tener efectos secundarios inesperados.

Answer 2

Pruebe algo como esto:

var clickEventType = ((document.ontouchstart!==null)?'click':'touchstart'); 

$('obj').bind(clickEventType, function(e){}); 

Mejor aún, utilizar .on() para la unión:

$('body').on(clickEventType, 'obj', function(e){}); 

En este documento se comprueba si existe touchstart, si lo hace, entonces su caso es 'touchstart' si no lo hace (la mayoría de los navegadores de escritorio) y luego su 'clic'.

También puede activar usando el mismo tipo de evento:

$('obj').trigger(clickEventType); 

Answer 3

No es la solución más bonito, pero el mejor que he encontrado hasta ahora. ¿Caída? Sólo funciona después de que el primer toque pasó por lo que no se puede utilizar de forma sincrónica :(

var isTouch = false; 
$('body').on('touchstart', function() { 
    isTouch = true; 
}); 

También puede comprobar si toque el apoyo del navegador primero con Modernizr por ejemplo.

Recuerde que no lo uso en el ámbito global (a menos que sea necesario). También puede cambiarlo para que sea "similar" a modernizr agregando la clase is-touch-device a la etiqueta Html agregando después del código isTouch = true: $('html').addClass('is-touch-device'). En este caso, puede hacer referencia desde cualquier lugar (también desde css)