Touchscreen-Geräte mit Javascript erkennen

129

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.

Brad Robinson
quelle
6
Warum kannst du nicht beides? Ist die Tap-Funktion bei Geräten ohne Touchscreen unerwünscht?
EMPraptor
1
Da einige neuere Geräte dies nicht unterstützen :hover, ist es wahrscheinlich besser (wenn Sie ein Stylesheet für mehrere Geräte codieren), es :hoverfür rein kosmetische Zwecke zu verwenden.
Plackerei
@empraptor: guter Punkt - ja, das könnte ich tun. Wir haben jedoch auch darüber nachgedacht, das Panel immer auf Touchscreen-Geräten anzuzeigen. In diesem Fall müsste ich in der Lage sein, Unterstützung zu erkennen.
Brad Robinson
Wenn Sie das Panel immer auf Touchscreen-Geräten anzeigen können, können Sie es dann nicht auch auf anderen Geräten anzeigen? Wie groß ist das Panel und warum ist es wünschenswert, es nur beim Hover / Tap anzuzeigen?
EMPraptor

Antworten:

12

+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/

Moin Zaman
quelle
1
Gute Lösung, Sie könnten wahrscheinlich so etwas wie einen Hover-Check mit einer one () -Bindung durchführen, damit er nur beim ersten Mal ausgelöst wird.
Timothy Perez
Das Problem ist, dass wenn Sie nach Bildschirmbreite zielen, wenn Sie Ihr Gerät drehen (nehmen wir das iPhone 6+ 736x414), es nicht den gleichen Stil hat. Also nicht die beste Lösung: /
Antoni
266
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.

KevBurnsJr
quelle
33
Wie in den docs Modernizr beschrieben, dies erkennt nur Browser - Fähigkeit, nicht Gerät Fähigkeit ... werden Sie ein falsch positives Ergebnis auf Geräten ohne Touch - Eingabe erhalten einen Touch-fähigen Browser ausgeführt wird . Ich kenne keine Möglichkeit, die Berührungsfähigkeit von Geräten nativ zu erkennen , ohne nur auf das Auftreten eines Berührungsereignisses zu warten.
Stu Cox
12
Um auch IE 10 touch zu erkennen, verwende ich: (window.navigator.msMaxTouchPoints || ('ontouchstart' in document.documentElement));
Alexander Kellett
2
'ontouchstart' in document.documentElement gibt auf BlackBerry 9300
Simpler
10
@typhon Wenn die Software (Win 8, moderne Browser) Touch unterstützt, gilt dies immer - auch wenn Sie Hardware (Desktop, Standardmonitor, Maus und Tastatur) verwenden, die Touch nicht unterstützt. Daher ist diese Lösung veraltet.
Barney
1
FunnyItsNotCamelCaseAsJsIsThroughout. Ich meine, die Leute müssen jetzt den Code kopieren, einfügen UND bearbeiten. :)
Ross
20

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?

Hallodom
quelle
Dies erkennt zwar Touchscreens, ist jedoch vorsichtig, da es auch für Laptops mit Touchscreens TRUE zurückgibt. Dies kann ein Problem sein, wenn Sie versuchen zu unterscheiden, ob der Benutzer von einem Telefon / Tablet ODER Computer / Laptop stammt, da bei Laptops mit Touchscreen TRUE zurückgegeben wird.
Kombinieren Sie den
8
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

Benutzer
quelle
Dies funktionierte und funktionierte in Google Chrome Developer Tools simulieren Gerät danke
Behnam Mohammadi
7
if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
    isTouch = true;
} else {
    isTouch = false;
}

Funktioniert überall !!

Code Spy
quelle
Und was hat das mit einer Maus zu tun? (die eigentliche Frage)
Hexalys
Es wäre einfacher zu tunisTouch = "ontouchstart" in window || navigator.msMaxTouchPoints;
Andrew
4

Ich benutze:

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

in jQuery Mobile 1.0.1

Kennzeichen
quelle
2
jQuery rät davon ab, jQuery.support zugunsten von Modernizr ( modernizr.com ) zu verwenden: reference - api.jquery.com/jQuery.support -
Jonathan Marzullo
4

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.

Asche
quelle
Beide Methoden geben auf Win 8-PCs mit FF 23 und Chrome 28 falsch positive Ergebnisse zurück. Ist dies immer der Fall oder liegt es daran, dass ich einmal einen Touchscreen an diesen Computer angeschlossen hatte - wahrscheinlich vor der Installation von FF und Chrome - aber nicht mehr? Ich habe nicht die Option "Berührungsereignisse emulieren" festgelegt.
Taifun
Äh, es ist immer ein Kampf mit neuer Hardware. Browser müssen mit den Abstraktionsschichten des Betriebssystems arbeiten ... die nicht immer alles implementieren ... kurz gesagt, bei JS muss man sich auf den Browser verlassen :) Es gibt nie einen universellen Weg.
Ash
Beide geben unter Ubuntu Firefox auf einem Non-Touch-Laptop true zurück.
NoBugs
4

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";
}
Timothy Perez
quelle
4
Seien Sie jedoch vorsichtig: Zumindest werfen iPads auch Mausüberschläge
Joril
14
Verdammt, Apple!
Timothy Perez
Benutzer von IE auf einem Windows-Tablet möchten möglicherweise sowohl Touch als auch Maus verwenden.
Sebazzz
Dieser Beitrag wurde erstellt, bevor das Windows Tablet ins Leben gerufen wurde.
Timothy Perez
@ s427 - Fecking IE ... mach einfach eine Überprüfung für IE8. Ich glaube nicht, dass es mobile Geräte mit <= IE8 gibt.
Timothy Perez
4

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!

silassare
quelle
3

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 :)

Prasad
quelle
Super einfach und funktioniert gut für mich. Getestet auf Android (altes Galaxy Note) und mit Emulatoren (Chrome) und auf iPad.
Ralf
Gibt bei Chrome ein falsches Positiv für mich zurück.
James
2

Das funktioniert bei mir:

function isTouchDevice(){
    return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}
Turtletrail
quelle
1
Auf wie vielen Plattformen, Browsern, Betriebssystemen und Geräten haben Sie getestet?
BerggreenDK
1
FF, Chrome, Safari auf Android und iOS (iPad)
Turtletrail
1
Nett genug. Ich habe gerade auf dem Desktop getestet und viel "undefiniert" bekommen, was die IF-Struktur ein bisschen hackig macht. Wenn Sie Ihren Rückgabewert nur ein wenig anpassen, gehen Sie wie folgt vor: return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch); Dann hast du wahr oder falsch :-)
BerggreenDK
2
In Chrome ist "ontouchstart" im Fenster auf meinem PC ohne Touchscreen wahr, daher funktioniert dies nicht. Wie bereits erwähnt, wird hiermit geprüft, ob der Browser berührungsfähig ist. Außerdem macht true == nichts und sollte weggelassen werden.
Rakensi
1
Wenn ich dies in Chrome mit dem eingebauten Emulator versuche, erkennt es Berührungen, wenn es im Emulator eingeschaltet ist, und erkennt keine Berührungen, wenn es ausgeschaltet ist. Funktioniert also gut für mich. Aber: Ich benutze die Kurzversion von Prasad (unten), die das || nicht verwendet in Turtletrails Code. Und: Es ist mir egal, ob es für 100% der Geräte funktioniert. 99% werden für mich tun.
Ralf
1

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

Peter-Pan
quelle
2
Ist jetzt die gleiche Antwort für 4 Fragen ... und dies ist keine Lösung für die Frage, die er stellt.
jycr753
1
Ich glaube, es beantwortet die Frage hier
Peter-Pan
Es ist nicht die Antwort, aber es ist ein Hinweis, den ich denke, für wen, der erkennen möchte, ob das Gerät berührbar ist, bevor der Benutzer es berührt
Shahadat Hossain Khan
1

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).

OZZIE
quelle
0

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 .

user3792852
quelle
-3

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.

Warte
quelle
1
Dies funktioniert nicht mit Opera Mobile 10 oder Internet Explorer Mobile 6 (Windows Mobile 6.5).
doubleJ
4
schlechte Crossbrowser / Cross OS / Cross Platform Beratung.
BerggreenDK