Erkennung von Browserfunktionen und selektiven Ereignissen für Maus und Touch

Question

Ich habe schon seit einiger Zeit Berührungsereignisse verwendet, aber ich bin gerade auf ein Problem gestoßen. Bisher habe ich überprüft, ob Touch-Funktionen unterstützt werden, und darauf basierende selektive Ereignisse angewendet. Gefällt mir:

if(document.ontouchmove === undefined){ 
    //apply mouse events 
}else{ 
    //apply touch events 
} 

Meine Skripts funktionieren jedoch nicht mehr in Chrome5 (derzeit Betaversion) auf meinem Computer. Ich recherchierte es ein wenig, und wie ich es erwartet hatte, ist in Chrome5 (im Gegensatz zu älteren Chrome, Firefox, IE usw.) document.ontouchmove nicht mehr undefined sondern null.

Zuerst wollte ich einen Fehlerbericht einreichen, aber dann wurde mir klar: Es gibt Geräte, die sowohl Maus- als auch Berührungsfunktionen haben. Das mag natürlich sein, vielleicht definiert Chrome es jetzt, weil mein Betriebssystem beide Arten von Ereignissen unterstützt .

Die Lösungen scheinen also einfach zu sein: Wenden Sie beide Ereignistypen an. Recht?

Nun das Problem findet jetzt auf Handy statt. Um rückwärtskompatibel zu sein und Skripte zu unterstützen, die nur Mausereignisse verwenden, versuchen mobile Browser möglicherweise auch, sie (bei Berührung) auszulösen. Wenn also sowohl Maus- als auch Berührungsereignisse gesetzt sind, kann ein bestimmter Handler jedes Mal zweimal aufgerufen werden.

Wie soll man das angehen? Gibt es eine bessere Möglichkeit, selektive Ereignisse zu überprüfen und anzuwenden, oder muss ich die Probleme ignorieren, die auftreten können, wenn Browser sowohl Touch- als auch Mausereignisse zeitweise auslösen?

Answer 1

Versuchen Sie, ein Dummy-Element zu erstellen, und fügen Sie einen Touch-Event-Handler hinzu. Überprüfen Sie dann, ob der Handler vom Typ "function" ist. Dies ist jedoch nicht idiotensicher, da einige Browser Touch-Event-Handler zulassen, obwohl sie auf einem Nicht-Touch-Gerät laufen - aber es ist wahrscheinlich so nah wie möglich. So etwas in der Art:

var hasTouch = function() { 
    var dummy = document.createElement("div"); 
    dummy.setAttribute("ontouchmove", "return;"); 
    return typeof dummy.ontouchmove == "function" ? true : false; 
} 

Glückliche Codierung!

Answer 2

Versuchen Sie, die Mausereignisse zu deaktivieren, wenn die Berührungsereignisse ausgelöst werden?

Z. B .:

 
function touch_events() { 
document.onmousemove = null; 
... 
} 

function mouse_events() { ... } 

document.ontouchmove = touch_events; 
document.onmousemove = mouse_events; 

Answer 3

Ist das zu offensichtlich?

if(document.ontouchmove !== undefined || document.ontouchmove == null){ 
    //apply touch events 
}else{ 
    //apply mouse events 
} 

Answer 4

var support_touch = (Typ der Berührung == "Objekt");

Answer 5

Ähnlich wie Ola Antwort, ich habe nur eine einfache Erkennung Werke gefunden, aber ich, dass insbesondere auch skurrile Android-Geräte finden (wie ein Lauffeuer) nicht immer dieses Ereignis definiert haben - dies funktioniert gut für mich:

//detect capabilities 
this.is_touch_device = ('ontouchstart' in document.documentElement) || (navigator.userAgent.match(/ipad|iphone|android/i) != null); 

//if so do somemthing 
if (this.is_touch_device) { 
    //like publishing a custom event 
} 

(wahrscheinlich ein besserer Weg, dies zu tun :)

Answer 6

hat ich dies falsch, oder jeden Beitrag tat dies hier weit eine Frage zu beantworten, die Sie fragen, nicht wahr? Zumindest haben Sie jetzt viele alternative Möglichkeiten, nach unterstützten Ereignissen zu suchen :)

Wie auch immer, bezüglich Ihrer Frage: Ich würde sagen, es hängt davon ab, was Sie bauen. Ich nehme an, wenn Sie "angewandte selektive Ereignisse basierend auf diesem" schreiben, meinen Sie das Hinzufügen von Ereignis-Listenern und -Handlern? Auch ich nehme an, dass Sie (noch) nicht mit Multitouch beschäftigen?

Wenn Sie möchten, dass Ihre App mit beiden Eingabeereignistypen arbeitet, bleibt Ihnen im Allgemeinen nichts anderes übrig, als Listener für all diese zu registrieren. Sie könnten den gleichen Handler für touchstart und mousedown bereits verwenden, so dass ich sicherstellen würde, dass nur eines der folgenden identischen Ereignisse tatsächlich verarbeitet wird (um CPU-Zyklen und Neuzeichnungen zu speichern und mögliche Nebenwirkungen zu vermeiden).

Wenn es um Touch-Geräte geht, spricht man von single touch, kann ich sehen, mein Level 10 (2.3.3) Handy generiert beide Ereignisse - die Mausereignisse, so "klassische" Web (all diese onmousedown-Events, etc.) ..) wird funktionieren, die Touch-Events ... naja, weil es anscheinend ein Touch-Gerät ist. Aber nur zu überprüfen, ob die JavaScript-API TouchEvents unterstützt, sagt nichts über das Eingabegerät aus, zum Beispiel: Der Rekonq-Browser auf Kubuntu Desktop gibt für die obigen Beispiele den Wert true zurück - aber er wird sie nur mit einem Touchscreen auslösen.

Vielleicht wäre es sinnvoller, Geräte über window.navigator.userAgent zu unterscheiden?