Come posso rilevare il supporto tattile del dispositivo in JavaScript?

Question

In passato, quando rileva se un dispositivo supporta eventi touch in JavaScript, potremmo fare qualcosa di simile:

var touch_capable = ('ontouchstart' in document.documentElement); 

Tuttavia, Google Chrome (17.x.x +) restituisce true per il controllo di cui sopra, anche se il dispositivo sottostante non supporta gli eventi di tocco. Ad esempio, l'esecuzione del codice di cui sopra su Windows 7 restituisce true, e, quindi, se si combinano con qualcosa di simile:

var start_evt = (touch_capable) ? 'ontouchstart' : 'onmousedown'; 

Su Google Chrome, l'evento viene mai sparato dal momento che stiamo legame ontouchstart. In breve, qualcuno sa un modo affidabile per aggirare questo? Sono attualmente in esecuzione il seguente controllo:

var touch_capable = ('ontouchstart' in document.documentElement && navigator.userAgent.toLowerCase().indexOf('chrome') == -1) 

Che è ben lungi dall'essere ideale ...

Answer 1

La risposta corretta è quello di gestire entrambi i tipi di eventi - non sono mutuamente esclusive.

Per un test più affidabile per il supporto touch, anche cercare di window.DocumentTouch && document instanceof DocumentTouch che è uno dei test utilizzati da Modernizr

Meglio ancora, basta usare Modernizr te stesso e lo hanno fare il rilevamento funzione per voi.

Nota che non è possibile impedire i falsi positivi, da qui la mia prima riga in alto: hai per avere il supporto.

Answer 2

Si consiglia di utilizzare il test di tocco Modernizr ben testato (e cross-browser).

Dal loro sito:

// bind to mouse events in any case 

if (Modernizr.touch){ 
    // bind to touchstart, touchmove, etc and watch `event.streamId` 
} 

http://modernizr.github.com/Modernizr/touch.html

Answer 3

Bene vecchia questione, ma dovendo fare questo senza una biblioteca, ho creato la seguente soluzione - semplicemente lasciare che gli eventi parlare per loro stessi - quando vedi gli eventi touch, basta disabilitare l'elaborazione degli eventi mouse.

In Coffescript sarebbe simile a questo;

  hasTouch = false 
      mouseIsDown = false 
      @divs.on "touchstart", (e)-> 
       hasTouch = true 
       touchstart(e.timeStamp,e.originalEvent.touches[0].pageX); 
       return true 
      @divs.on "mousedown", (e)-> 
       mouseIsDown = true; 
       touchstart(e.timeStamp,e.clientX) if not hasTouch 
       return true 

      @divs.on 'touchmove', (e) -> 
       touchmove(e.timeStamp,e.originalEvent.touches[0].pageX); 
       return true; 
      @divs.on 'mousemove', (e) -> 
       touchmove(e.timeStamp,e.clientX) if mouseIsDown and not hasTouch 
       return true; 

      @divs.on 'touchend', (e) -> 
       touchend(); 
       return true 
      @divs.on 'mouseup', (e) -> 
       mouseIsDown = false; 
       touchend() if not hasTouch 
       return true 

funzioni Il giusto definire per touchstart, move e end contenente la logica attuale ....

Answer 4

Questa è una modifica del modo Modernizr esegue il rilevamento di tocco, con aggiunto il supporto per lavorare con dispositivi toccare IE10 +.

var isTouchCapable = 'ontouchstart' in window || 
window.DocumentTouch && document instanceof window.DocumentTouch || 
navigator.maxTouchPoints > 0 || 
window.navigator.msMaxTouchPoints > 0; 

non è infallibile dal detecting a touch device is apparently an impossibility.

tua situazione potrebbe essere diversa:

• più vecchi dispositivi touchscreen emulano solo gli eventi del mouse
• alcuni browser & setup del sistema operativo possono consentire API tocco quando nessun touchscreen è collegato
• In un ibrido del mouse/touch/trackpad/pen/tastiera, questo non indica quale input è utilizzato, solo che il browser è permaloso - solo rileva se il browser potrebbe accetta o emula un input tocco. Ad esempio, un utente può passare dall'uso del mouse a toccare lo schermo su un laptop abilitato al tocco o su un tablet connesso al mouse in qualsiasi momento.

Aggiornamento: Un consiglio: Non utilizzare il rilevamento touch-capacità di controllare & specificare comportamenti UI, use event listeners instead. Il design per l'evento click/touch/keyup, non il dispositivo, il rilevamento della capacità di tocco viene in genere utilizzato per salvare la spesa della CPU/memoria dell'aggiunta di un listener di eventi. Un esempio di dove il rilevamento del tocco potrebbe essere utile e appropriato:

if (isTouchCapable) { 
    document.addEventListener('touchstart', myTouchFunction, false); 
}