jquery touchstart nel browser

Question

Poiché touchstart/touchend non è ancora supportato nella maggior parte dei browser desktop. Come posso creare un evento touchstart che sarà uguale all'evento mousedown (che è supportato in tutti i browser).

voglio qualcosa di simile

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

sarà tradotto in

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

Answer 1

È possibile associare entrambi contemporaneamente ...

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

Se si desidera mousedown evento fire touchstart eventi automaticamente (quindi è necessario associare solo touchstart) usare ...

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

noti che questo significa mousedown eventi devono propagare al document prima che l'usanza touchstart evento può essere attivato. Questo potrebbe avere effetti collaterali inaspettati.

Answer 2

provare qualcosa di simile:

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

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

Meglio ancora, utilizzare .on() per il legame:

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

Questo documento verifica se esiste TouchStart, se lo fa, allora il vostro evento è "touchstart" se non lo fa (la maggior parte dei browser desktop), quindi il suo "clic".

Si può anche innescare utilizzando lo stesso tipo di evento:

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

Answer 3

Non è la soluzione più bella, ma la migliore che ho trovato fino ad ora. Caduta? Funziona solo dopo il primo tocco è accaduto così non è possibile utilizzare in modo sincrono :(

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

si può anche verificare se il supporto del browser contatto prima con Modernizr per esempio.

Ricordatevi di non utilizzarlo in ambito globale (Puoi anche cambiarlo per essere "simile" al moderno aggiungendo classe is-touch-device al tag Html aggiungendo dopo il codice isTouch = true: $('html').addClass('is-touch-device'). In questo caso puoi fare riferimento da ovunque (anche da css)