Berührungsereignisse verstehen

80

Ich versuche, einige meiner Bibliotheken mit Touch-Geräten zum Laufen zu bringen, aber es fällt mir schwer, herauszufinden, wie sie unterstützt werden und wie sie funktionieren.

Grundsätzlich gibt es 5 Touch-Ereignisse , aber es scheint, dass es unter mobilen Browsern nur einen Konsens über das touchstartEreignis gibt (duh). Ich habe eine Geige als Testfall erstellt.

Ich habe dies auf meinem Galaxy Note mit Android 4 an Bord getestet, aber Sie können den Link auch mit einem Desktop-Browser überprüfen.

Das Ziel ist es, herauszufinden, wie man mit Wasserhähnen, Doppelhähnen und langen Wasserhähnen umgeht. Nichts Besonderes.

Grundsätzlich passiert Folgendes:

Der Android-Aktienbrowser löst keine Touch-Ereignisse aus. Es wird versucht , nur Mausklicks mit Hähnen zu emulieren, Brennen mousedown, mouseupund clickEreignissen hintereinander, aber doppelt Taps einzoomen nur in und out tha Seite.

Chrome für Android löst das Touchstart-Ereignis aus, wenn der Finger den Bildschirm berührt. Wenn es früh genug freigegeben ist, feuert es dann mousedown, mouseup, touchendund schließlich clickEreignisse.

Im Fall einer langen Hahn , nach etwa einer halben Sekunde es feuert , mousedownund mouseup, und , touchendwenn der Finger angehoben wird, ohne clickEreignis am Ende.

Wenn Sie Ihren Finger bewegen , wird ein touchmoveEreignis ein paar Mal ausgelöst, dann wird ein touchcancelEreignis ausgelöst, und danach passiert nichts, nicht einmal ein touchendEreignis beim Anheben des Fingers.

Durch zweimaliges Tippen werden die Funktionen zum Vergrößern / Verkleinern ausgelöst , aber in Bezug auf das Ereignis wird die Kombination ausgelöst touchstart- toucheventzweimal, ohne dass Mausereignisse ausgelöst werden.

Firefox für Android feuert richtig die touchstartVeranstaltung, und bei kurzem Hahn Feuer mousedown, mouseup, touchendund clickdanach.

Im Fall einer langen Hahn , feuert sie mousedown, mouseupund schließlich touchendEreignisse. Für diese Dinge ist es dasselbe wie für Chrome.

Wenn Sie jedoch Ihren Finger bewegen , wenn er touchmovekontinuierlich ausgelöst wird (wie zu erwarten ist), das Ereignis jedoch nicht ausgelöst wird, touchleavewenn der Finger das Element mit dem Ereignis-Listener verlässt, und das Ereignis nicht ausgelöst wird, touchcancelwenn der Finger das Browser-Ansichtsfenster verlässt .

Bei Doppelklicks verhält es sich wie Chrome.

Opera Mobile macht das Gleiche wie Chrome und Firefox für ein kurzes Tippen, aktiviert jedoch bei langem Drücken eine Freigabefunktion, die ich wirklich deaktivieren möchte. Wenn Sie Ihren Finger bewegen oder zweimal tippen, verhält es sich wie Firefox.

Chrome Beta macht das Übliche für kurze Taps, aber bei langen Taps wird das mouseupEreignis nicht mehr ausgelöst, nur touchstartdann, mousedownnach einer halben Sekunde, dann, touchendwenn der Finger angehoben wird. Wenn der Finger bewegt wird, verhält er sich jetzt wie Firefox und Opera Mobile.

Bei doppeltem Tippen werden beim Verkleinern keine Berührungsereignisse ausgelöst , sondern nur beim Vergrößern.

Chrome Beta zeigt das seltsamste Verhalten, aber ich kann mich nicht wirklich beschweren, da es sich um eine Beta handelt.

Die Frage ist : Gibt es eine einfache Möglichkeit, kurze, lange und doppelte Taps in den gängigsten Browsern von Touch-Geräten zu erkennen?

Schade, dass ich es nicht auf iOS-Geräten mit Safari oder IE für Windows Phone 7 / Phone 8 / RT testen kann, aber wenn einige von Ihnen dies können, wäre Ihr Feedback sehr dankbar.

javascript mobile touch MaxArt
quelle
1
Haben Sie Tocca.js ausprobiert? gianlucaguarini.github.io/Tocca.js Es aktiviert alle fehlenden Berührungsereignisse auf jeder Art von Gerät und es ist nur etwa 1 KB
Gianluca Guarini

Antworten:

26

Wenn Sie es noch nicht getan haben, würde ich empfehlen, den Quellcode für Hammer.js zu lesen

https://github.com/hammerjs/hammer.js/blob/master/hammer.js

Zwischen Kommentaren und Code sind es ungefähr 1400 Zeilen, es gibt eine großartige Dokumentation und der Code ist leicht zu verstehen.

Sie können sehen, wie der Autor viele der häufigsten Berührungsereignisse gelöst hat:

Halten, Tippen, Doppeltippen, Ziehen, Dragstart, Dragend, Dragup, Dragdown, Dragleft, Dragright, Swipe, Swipeup, Swipedown, Swipeleft, Swiperight, Transformieren, Transformieren, Transformieren, Drehen, Kneifen, Kneifen, Kneifen, Berühren (Gestenerkennung beginnt) , loslassen (Gestenerkennung endet)

Ich denke, nachdem Sie den Quellcode gelesen haben, werden Sie viel besser verstehen, wie Berührungsereignisse funktionieren und wie Sie identifizieren können, welche Ereignisse der Browser verarbeiten kann.

http://eightmedia.github.io/hammer.js/

vrtis
quelle
Interessantes Stück Code, scheint ziemlich vollständig und umfangreich. Ich könnte einige Zeit brauchen, um es zu analysieren.
MaxArt
9

Es gibt eine wirklich hervorragende Ressource https://patrickhlauke.github.io/touch/tests/results/ , die die Reihenfolge der Ereignisse in einer erstaunlichen Anzahl von Browsern beschreibt. Es scheint auch regelmäßig aktualisiert zu werden (im September 2016 wurde es zuletzt im August 2016 aktualisiert).

Das Wesentliche ist, im Wesentlichen alles , was auslöst mouseoverund verwandte Ereignisse; Die meisten lösen auch Berührungsereignisse aus, die normalerweisetouchend vorher abgeschlossen (erreicht ) mouseoverund dann fortgesetzt werden click(es sei denn, eine Änderung des Seiteninhalts hebt dies auf). Diese unangenehmen Ausnahmen sind glücklicherweise relativ selten (Android-Browser von Drittanbietern und Blackberry-Playbook).

Diese verknüpfte Ressource weist eine beeindruckende Detailgenauigkeit auf. Hier ein Beispiel der ersten drei von vielen, vielen Betriebssystem-, Geräte- und Browsertests:

Geben Sie hier die Bildbeschreibung ein

Um einige der wichtigsten Punkte zusammenzufassen:

Mobile Browser

  • Alle aufgelisteten Browser werden mouseoverbeim ersten Tippen ausgelöst . Nur einige Windows Phone-Browser lösen es bei einem zweiten Tippen aus.
  • Alle lösen aus click. Es wird nicht angegeben, welcher Abbruch erfolgt, clickwenn mouseoverdie Seite geändert wird (ich glaube, die meisten tun dies).
  • Die meisten Browser werden mouseovernach touchstartund ausgelöst touchend. Dies umfasst iOS7.1 Safari, Android, Chrome, Opera und Firefox für Android sowie einige (nicht alle Windows Phone-Browser)
  • Mehrere Windows Phone-Browser (alle Windows 8 / 8.1 und eine Version für 10) und mehrere Android-Browser von Drittanbietern (Dolphin, Maxathon, UC) werden mouseover nach touchstart und ausgelöst touchend.
  • Nur Blackberry Playbook wird mouseoverzwischen touchstartund ausgelösttouchend
  • Nur Opera Mini und Puffin (Android-Browser eines Drittanbieters) fehlen touchstartoder touchend.

Desktop-Browser

  • Up Vernünftigerweise zu aktuellen Versionen von Desktop - Chrome und Opera verhalten sich wie ihre mobilen Pendants, touchstartund touchendanschließend mouseover.
  • Firefox und Microsoft - Browser (IE <= 11 und viele Versionen des Edge) nicht jeden auslösen touchstartund touchendEreignisse.
  • Keine Daten auf Macs, aber vermutlich keine Ma-Browser unterstützen touchstartund touchendangesichts der Knappheit an Mac-Touchscreen-Schnittstellen.

Es gibt auch eine unglaubliche Datenmenge in Browsern, kombiniert mit unterstützenden Technologien.

user56reinstatemonica8
quelle
3

Ja, Sie können einen Timer um starten touchstartund beenden touchendund von dort aus Ihre Auswahl treffen.

Sie können auch ... sagen wir, wischen, meine Auslösung touchmoveSie können die Koordinaten des "Fingers" erhalten und sehen, wie viel ich gereist bin, bevor touchendausgelöst wird.

Ich weiß nicht, ob es einen einfacheren Weg gibt, als eine Touch-Ereignisbibliothek zu verwenden, aber ich nehme an, Sie könnten ganz einfach einen für einfache "Tap" -, "Double Tap" - und "Swipe" -Ereignisse schreiben.

Alexandru Calin
quelle
1
Wenn Sie darüber nachdenken und das Verhalten der oben genannten Browser berücksichtigen, werden Sie zugeben, dass dies überhaupt nicht einfach ist. Wenn Sie beispielsweise ein Element berühren, dann Ihren Finger außerhalb des Elements bewegen und dann den Finger anheben, wäre dies kein gültiges "Tippen", aber Sie können es nicht erkennen, da touchleavees nie abgefeuert wird.
MaxArt
Sie machen einen guten Punkt, ABER; e.targetIst es bei richtiger Codierung, wie wir, das Element (glaube ich) beim Touchstart zu erfassen, gleich dem Element am Touchend? Wenn nein, dann ist es kein gültiger Tipp, es ist eine Falle. Ich sage nicht, dass das Codieren einer Bibliothek einfach wäre, aber es ist nicht wirklich "schwer", ich würde es als "mittel" einstufen + was macht es Spaß, wenn es nicht herausfordernd ist und uns dazu bringt, auf stackoverflow xD zurückzukehren
Alexandru Calin
Das Codieren einer Bibliothek wäre für mich kein Problem, ich finde es herausfordernd, befriedigend und macht etwas Spaß. Aber Ihr Kommentar deutet nur auf eine Lösung hin, aber wie bauen Sie sie auf? Wo bewahren Sie die Informationen zur touchstartVeranstaltung auf? Was ist, wenn touchstartwährenddessen ein zweites Ereignis ausgelöst wird (Multitouch-Anzeige)? Wie geht man mit langen Wasserhähnen um? Verwenden setTimeout, aber was ist, wenn der Finger das Element währenddessen verlässt? Wie erkennt man es, wenn keine Berührungsereignisse ausgelöst werden? Und so weiter ... Ich werde es natürlich versuchen, aber ich hatte gehofft, eine tiefe Analyse von Berührungsereignissen zu finden.
MaxArt
Sie können kein zweites Touchstart-Ereignis auslösen, ohne dass das Touchend-Ereignis ausgelöst wird. Daher können Sie nicht zwei gleichzeitig tippen, sodass dies kein Problem darstellt. Sie würden die Informationen in den Variablen behalten und sie am Touchend zurücksetzen
Alexandru Calin
Das ist falsch, Sie können eine Sekunde haben, touchstartbevor die erste touchendauftritt. Darüber hinaus führt das erneute Nachdenken über Ihre Antwort zu dem Schluss, dass dies nicht hilfreich ist, da die targetEigenschaft des touchendEreignisses immer dem Element entspricht, in dem die Berührung begonnen hat, selbst wenn der Finger außerhalb des Elements bewegt wurde!
MaxArt
3

Hier ist meine neueste Beobachtung zu Berührungs- und Mausereignissen unter Android 4.3

Opera, Firefox und Chrome scheinen ein Standardverhalten zu haben

  1. Beim Wischen (touchstart-touchmove-touchend):

    1. Es wird kein Mausereignis (außer Mouseover) ausgelöst.
    2. Mouseover wird nur ausgelöst, wenn Touchstart und Touchend auf demselben Element ausgeführt werden. (touchstart-touchmove-touchend-mouseover)
    3. Wenn beim Touchstart die Standardeinstellung verhindert wird: Das Standard-Swipe-Verhalten funktioniert nicht. Es werden keine Änderungen bezüglich des Auslösens von Mausereignissen vorgenommen.

  2. On Tap (Touchstart-Touchend):

    1. Alle Mausereignisse Mouseover-Mousemove-Mousedown-Mouseup-Click werden nach einer Verzögerung ausgelöst
    2. Wenn beim Touchstart die Standardeinstellung verhindert wird: Nur Mouseover wird ausgelöst.

Der Android-Standardbrowser weist einige nicht standardmäßige Verhaltensweisen auf :

  1. Mouseover wird vor dem Touchstart ausgelöst, was bedeutet, dass Mouseover immer ausgelöst wird.
  2. Alle Mausereignisse werden beim Tippen ausgelöst, auch wenn die Standardeinstellung beim Touchstart verhindert wird.
Semra
quelle