Touchscreen-Geräte mit Javascript erkennen

Wie kann ich in Javascript / jQuery feststellen, ob das Clientgerät über eine Maus verfügt?

Ich habe eine Website, auf der ein kleines Infofenster angezeigt wird, wenn der Benutzer mit der Maus über ein Element fährt. Ich verwende jQuery.hoverIntent, um den Schwebeflug zu erkennen, aber dies funktioniert offensichtlich nicht auf Touchscreen-Geräten wie iPhone / iPad / Android. Auf diesen Geräten möchte ich also auf tippen zurückgreifen, um das Infofenster anzuzeigen.

+1 dafür hoverund clickbeides. Eine andere Möglichkeit könnte darin bestehen, CSS-Medienabfragen zu verwenden und einige Stile nur für kleinere Bildschirme / Mobilgeräte zu verwenden, bei denen es sich am wahrscheinlichsten um Touch / Tap-Funktionen handelt. Wenn Sie also bestimmte Stile über CSS haben und in jQuery diese Elemente auf die Stileigenschaften für mobile Geräte überprüfen, können Sie sie einbinden, um Ihren mobilen Code zu schreiben.

Siehe hier: http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

var isTouchDevice = 'ontouchstart' in document.documentElement;

Hinweis : Nur weil ein Gerät Berührungsereignisse unterstützt, bedeutet dies nicht unbedingt, dass es sich ausschließlich um ein Touchscreen-Gerät handelt. Viele Geräte (wie mein Asus Zenbook) unterstützen sowohl Klick- als auch Berührungsereignisse, auch wenn sie keine tatsächlichen Berührungseingabemechanismen haben. Schließen Sie beim Entwerfen für Touch-Unterstützung immer die Unterstützung von Klickereignissen ein und gehen Sie niemals davon aus, dass es sich bei einem Gerät ausschließlich um das eine oder andere handelt.

Gefundene Tests für Windows.Touch funktionierten nicht auf Android, aber dies funktioniert:

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

Siehe Artikel: Wie kann ein Touchscreen-Gerät am besten mit JavaScript erkannt werden?

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

Grund für die Verwendung von maxTouchPoints zusammen mit msMaxTouchPoints:

Microsoft hat angegeben, dass ab Internet Explorer 11 die vom Microsoft-Hersteller vorangestellte Version dieser Eigenschaft (msMaxTouchPoints) entfernt werden kann, und empfiehlt stattdessen die Verwendung von maxTouchPoints.

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

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

Funktioniert überall !!

Ich benutze:

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

in jQuery Mobile 1.0.1

Google Chrome scheint in diesem Fall falsch positive Ergebnisse zurückzugeben:

var isTouch = 'ontouchstart' in document.documentElement;

Ich nehme an, es hat etwas mit seiner Fähigkeit zu tun, "Berührungsereignisse zu emulieren" (F12 -> Einstellungen in der unteren rechten Ecke -> Registerkarte "Überschreibungen" -> letztes Kontrollkästchen). Ich weiß, dass es standardmäßig deaktiviert ist, aber damit verbinde ich die Änderung der Ergebnisse (die "in" -Methode, die in Chrome verwendet wird). Dies scheint jedoch zu funktionieren, soweit ich getestet habe:

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

Alle Browser, in denen ich diesen Code ausgeführt habe, geben an, dass der Typ "Objekt" ist, aber ich bin mir sicherer, dass es alles andere als undefiniert ist :-)

Getestet auf IE7, IE8, IE9, IE10, Chrome 23.0.1271.64, Chrome für iPad 21.0.1180.80 und iPad Safari. Es wäre cool, wenn jemand weitere Tests durchführen und die Ergebnisse teilen würde.

Schrieb dies für eine meiner Websites und ist wahrscheinlich die narrensicherste Lösung. Zumal selbst Modernizr bei der Berührungserkennung falsch positive Ergebnisse erzielen kann.

Wenn Sie jQuery verwenden

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

oder einfach nur JS ...

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

Für meinen ersten Beitrag / Kommentar: Wir alle wissen, dass 'Touchstart' vor dem Klicken ausgelöst wird. Wir wissen auch, dass der Benutzer beim Öffnen Ihrer Seite: 1) die Maus bewegen 2) klicken 3) den Bildschirm berühren (zum Scrollen oder ... :))

Versuchen wir etwas:

// -> 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';
});

// <- End: jQuery

Einen schönen Tag noch!

Ich habe den folgenden Code getestet, der oben in der Diskussion erwähnt wurde

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

funktioniert auf Android Mozilla, Chrome, Opera, Android Standardbrowser und Safari auf dem iPhone ... alles positiv ...

scheint solide für mich :)

Ein hilfreicher Blog-Beitrag zu diesem Thema, der aus der Modernizr-Quelle zur Erkennung von Berührungsereignissen verlinkt ist. Fazit: Es ist nicht möglich, Touchscreen-Geräte aus Javascript zuverlässig zu erkennen.

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

Das funktioniert bei mir:

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

Wenn Sie Modernizr verwenden , ist es Modernizr.touchwie bereits erwähnt sehr einfach zu verwenden .

Ich bevorzuge jedoch die Verwendung einer Kombination aus Modernizr.touchund Testen von Benutzeragenten, um sicher zu gehen.

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
    }

Wenn Sie Modernizr nicht verwenden, können Sie die Modernizr.touchobige Funktion einfach durch ersetzen('ontouchstart' in document.documentElement)

Beachten Sie außerdem, dass Sie durch das Testen des Benutzeragenten iemobileeine größere Auswahl an erkannten Microsoft-Mobilgeräten erhalten als Windows Phone.

Siehe auch diese SO-Frage

In jQuery Mobile können Sie einfach Folgendes tun:

$.support.touch

Ich weiß nicht, warum dies so undokumentiert ist. Aber es ist Crossbrowser-sicher (die neuesten 2 Versionen der aktuellen Browser).

Wie bereits erwähnt, kann ein Gerät sowohl Maus- als auch Berührungseingaben unterstützen. Sehr oft lautet die Frage nicht "Was wird unterstützt", sondern "Was wird derzeit verwendet".

In diesem Fall können Sie einfach Mausereignisse (einschließlich des Hover-Listeners) und Berührungsereignisse registrieren.

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

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

...

JavaScript sollte basierend auf Benutzereingaben automatisch den richtigen Listener aufrufen. Im Falle eines Berührungsereignisses onTouchStartCallbackwird also ausgelöst und Ihr Hover-Code emuliert.

Beachten Sie, dass eine Berührung beide Arten von Zuhörern auslösen kann, Berührung und Maus. Der Touch-Listener geht jedoch zuerst und kann verhindern, dass nachfolgende Maus-Listener durch Aufrufen ausgelöst werden event.preventDefault().

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

Lesen Sie hier weiter .

Für die iPad-Entwicklung verwende ich:

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

Ich kann mich dann selektiv an berührungsbasierte Ereignisse (z. B. ontouchstart) oder mausbasierte Ereignisse (z. B. onmousedown) binden. Ich habe noch nicht auf Android getestet.