Rilevamento di dispositivi touchscreen con Javascript

In Javascript / jQuery, come posso rilevare se il dispositivo client ha un mouse?

Ho un sito che fa scorrere un piccolo pannello informativo quando l'utente passa il mouse sopra un oggetto. Sto usando jQuery.hoverIntent per rilevare l'hover, ma questo ovviamente non funziona su dispositivi touchscreen come iPhone / iPad / Android. Quindi su quei dispositivi vorrei tornare a toccare per mostrare il pannello informazioni.

+1 per fare hovered clickentrambi. Un altro modo potrebbe essere l'uso di query multimediali CSS e l'utilizzo di alcuni stili solo per schermi / dispositivi mobili più piccoli, che sono quelli che hanno più probabilità di avere funzionalità touch / tap. Quindi, se hai alcuni stili specifici tramite CSS e da jQuery controlli quegli elementi per le proprietà dello stile del dispositivo mobile, potresti collegarli per scrivere il tuo codice specifico per il cellulare.

Vedi qui: http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

var isTouchDevice = 'ontouchstart' in document.documentElement;

Nota : solo perché un dispositivo supporta eventi touch non significa necessariamente che sia esclusivamente un dispositivo touch screen. Molti dispositivi (come il mio Asus Zenbook) supportano sia eventi click che touch, anche quando non dispongono di meccanismi di input touch effettivi. Quando si progetta per il supporto touch, includere sempre il supporto eventi click e non dare mai per scontato che qualsiasi dispositivo sia esclusivamente l'uno o l'altro.

Test trovati per window.Touch non funzionava su Android ma questo fa:

function is_touch_device() {
  return !!('ontouchstart' in window);
}

Vedi l'articolo: Qual è il modo migliore per rilevare un dispositivo 'touch screen' usando JavaScript?

return (('ontouchstart' in window)
      || (navigator.maxTouchPoints > 0)
      || (navigator.msMaxTouchPoints > 0));

Motivo per l'utilizzo di maxTouchPoints insieme a msMaxTouchPoints:

Microsoft ha dichiarato che a partire da Internet Explorer 11, la versione con prefisso del fornitore Microsoft di questa proprietà (msMaxTouchPoints) potrebbe essere rimossa e consiglia invece di utilizzare maxTouchPoints.

Fonte: http://ctrlq.org/code/19616-detect-touch-screen-javascript

if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
    isTouch = true;
} else {
    isTouch = false;
}

Funziona ovunque !!

Io uso:

if(jQuery.support.touch){
    alert('Touch enabled');
}

in jQuery mobile 1.0.1

Google Chrome sembra restituire falsi positivi su questo:

var isTouch = 'ontouchstart' in document.documentElement;

Suppongo che abbia qualcosa a che fare con la sua capacità di "emulare eventi tattili" (F12 -> impostazioni nell'angolo in basso a destra -> scheda "sostituzioni" -> ultima casella di controllo). So che è disattivato per impostazione predefinita, ma è a questo che collego la modifica dei risultati (il metodo "in" utilizzato per funzionare in Chrome). Tuttavia, questo sembra funzionare, per quanto ho testato:

var isTouch = !!("undefined" != typeof document.documentElement.ontouchstart);

Tutti i browser su cui ho eseguito quel codice dichiarano che typeof è "oggetto" ma mi sento più sicuro sapendo che è tutt'altro che indefinito :-)

Testato su IE7, IE8, IE9, IE10, Chrome 23.0.1271.64, Chrome per iPad 21.0.1180.80 e iPad Safari. Sarebbe bello se qualcuno eseguisse altri test e condividesse i risultati.

Ho scritto questo per uno dei miei siti e probabilmente è la soluzione più infallibile. Soprattutto dal momento che anche Modernizr può ottenere falsi positivi sul rilevamento del tocco.

Se stai usando jQuery

$(window).one({
  mouseover : function(){
    Modernizr.touch = false; // Add this line if you have Modernizr
    $('html').removeClass('touch').addClass('mouse');
  } 
});

o semplicemente JS puro ...

window.onmouseover = function(){ 
    window.onmouseover = null;
    document.getElementsByTagName("html")[0].className += " mouse";
}

Per il mio primo post / commento: sappiamo tutti che il "touchstart" viene attivato prima del clic. Sappiamo anche che quando l'utente apre la tua pagina: 1) sposta il mouse 2) fai clic 3) tocca lo schermo (per scorrere, o ... :))

Proviamo qualcosa:

// -> Start: jQuery

var hasTouchCapabilities = 'ontouchstart' in window && (navigator.maxTouchPoints || navigator.msMaxTouchPoints);
var isTouchDevice = hasTouchCapabilities ? 'maybe':'nope';

//attach a once called event handler to window

$(window).one('touchstart mousemove click',function(e){

    if ( isTouchDevice === 'maybe' && e.type === 'touchstart' )
        isTouchDevice = 'yes';
});

// <- Fine: jQuery

Buona giornata!

Ho testato il seguente codice sopra menzionato nella discussione

 function is_touch_device() {
    return !!('ontouchstart' in window);
 }

funziona su Android Mozilla, Chrome, Opera, browser predefinito Android e Safari su iPhone ... tutto positivo ...

sembra solido per me :)

Un utile post sul blog sull'argomento, collegato dall'interno della fonte Modernizr per rilevare eventi tattili. Conclusione: non è possibile rilevare in modo affidabile i dispositivi touchscreen da Javascript.

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

Questo funziona per me:

function isTouchDevice(){
    return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}

Se usi Modernizr , è molto facile da usareModernizr.touch come menzionato in precedenza.

Tuttavia, preferisco utilizzare una combinazione di Modernizr.touchtest utente e utente, solo per sicurezza.

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

Se non usi Modernizr, puoi semplicemente sostituire la Modernizr.touchfunzione sopra con('ontouchstart' in document.documentElement)

Si noti inoltre che il test dell'agente utente iemobileoffre una gamma più ampia di dispositivi mobili Microsoft rilevati rispetto a Windows Phone.

Vedi anche questa domanda SO

In jQuery Mobile puoi semplicemente fare:

$.support.touch

Non so perché sia ​​così privo di documenti .. ma è sicuro per i browser (ultime 2 versioni degli attuali browser).

Come già accennato, un dispositivo può supportare sia l'input tramite mouse che touch. Molto spesso, la domanda non è "cosa è supportato" ma "cosa viene attualmente utilizzato".

In questo caso, puoi semplicemente registrare gli eventi del mouse (incluso il listener hover) e toccare gli eventi allo stesso modo.

element.addEventListener('touchstart',onTouchStartCallback,false);

element.addEventListener('onmousedown',onMouseDownCallback,false);

...

JavaScript dovrebbe chiamare automaticamente il listener corretto in base all'input dell'utente. Quindi, in caso di un evento touch, onTouchStartCallbackverrà generato, emulando il tuo codice al passaggio del mouse.

Nota che un tocco può far scattare entrambi i tipi di ascoltatori, tocco e mouse. Tuttavia, il touch listener inizia per primo e può impedire che i successivi ascoltatori del mouse si attivino chiamando event.preventDefault().

function onTouchStartCallback(ev) {
    // Call preventDefault() to prevent any further handling
    ev.preventDefault();
    your code...
}

Ulteriori letture qui .

Per lo sviluppo di iPad sto usando:

  if (window.Touch)
  {
    alert("touchy touchy");
  }
  else
  {
    alert("no touchy touchy");
  }

Posso quindi collegarmi selettivamente agli eventi basati sul tocco (ad es. Intouchstart) o agli eventi basati sul mouse (ad es. Onmousedown). Non ho ancora testato su Android.