it-swarm.com.de

Wie überprüfe ich den Browser auf Touchstart-Unterstützung mit JS / jQuery?

In dem Versuch, Best Practices zu befolgen, versuchen wir, die richtigen JavaScript/jQuery-Ereignisse entsprechend dem verwendeten Gerät zu verwenden. Zum Beispiel erstellen wir eine mobile Website mit einem Tag, auf dem ein Klick- oder Touch-Ereignis angezeigt wird. Bei einem iPhone möchten wir das Ereignis "touchstart" verwenden. Wir möchten testen, ob ihr Gerät "touchstart" unterstützt, bevor wir diesen Handler an das Objekt binden. Wenn nicht, binden wir stattdessen "onclick".

Wie geht das am besten?

53
Alex

Sie können feststellen, ob das Ereignis unterstützt wird von:

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

Sehen Sie sich diesen Artikel an:

Die dort veröffentlichte Funktion isEventSupported kann eine Vielzahl von Ereignissen sehr gut erkennen und ist browserübergreifend.

90
CMS

Verwenden Sie diesen Code, um festzustellen, ob das Gerät Touch unterstützt.

Funktioniert auch für Windows 8 IE10, das das Ereignis 'MSPointerDown' anstelle von 'touchmove' verwendet

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;
    }

}
12

Sie könnten überprüfen, ob typeof document.body.ontouchstart == "undefined", um auf normale Dom-Ereignisse zurückzugreifen

3
antimatter15

Ich habe eine vollständige Demo erstellt, die in jedem Browser mit dem vollständigen Quellcode der Lösung dieses Problems funktioniert: Erkennen von Touchscreen-Geräten in Javascript .