Come controllare il browser per il supporto touchstart usando JS/jQuery?

Question

Nel tentativo di seguire le best practice, stiamo tentando di utilizzare gli eventi JavaScript/jQuery appropriati in base al dispositivo utilizzato. Ad esempio, stiamo creando un sito per dispositivi mobili con un tag che avrà un evento onclick o touch. Nel caso di un iPhone, vorremmo utilizzare l'evento "touchstart". Vorremmo testare se il loro dispositivo supporta "touchstart" prima di associare il gestore all'oggetto. In caso contrario, vincoleremo "onclick".

Qual è il modo migliore per farlo?

Answer 1

È possibile rilevare se l'evento è sostenuto da:

if ('ontouchstart' in document.documentElement) { 
    //... 
} 

dare uno sguardo a questo articolo:

• Detecting event support without browser sniffing

La funzione isEventSupported pubblicato lì, è veramente buono a rilevare una vasta gamma di eventi, ed è cross-browser.

Answer 2

si potrebbe verificare se typeof document.body.ontouchstart == "undefined" a ripiegare a normali eventi DOM

Answer 3

ho fatto una dimostrazione completa che funziona in tutti i browser con il codice sorgente completo della soluzione di questo problema: Detect touch screen devices in Javascript.

Answer 4

Utilizzare questo codice per rilevare se il dispositivo supporta il tocco.

funzionare anche per Windows 8, che utilizza IE10 evento 'MSPointerDown' invece di 'touchmove'

var supportsTouch = false; 
if ('ontouchstart' in window) { 
    //iOS & android 
    supportsTouch = true; 

} else if(window.navigator.msPointerEnabled) { 

    // Windows 
    // To test for touch capable hardware 
    if(navigator.msMaxTouchPoints) { 
     supportsTouch = true; 
    } 

}