Frage Verstehen von Berührungsereignissen


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

Grundsätzlich gibt es 5 Berührungsereignisse, aber es scheint, es gibt Konsens unter den mobilen Browsern nur auf der touchstart Ereignis (duh). Ich habe eine erstellt Geige als Testfall.

Ich habe das 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 Taps, Double Taps und Long Taps umgeht. Nichts Außergewöhnliches.

Im Grunde geschieht Folgendes:

Das Android-Aktienbrowser löst keine Berührungsereignisse aus. Es versucht nur, Mausklicks mit Taps, Feuern zu emulieren mousedown, mouseup und click Ereignisse nacheinander, aber Doppeltippen einfach zoom in und aus der Seite.

Chrom für Android löst das Touchstart-Ereignis aus, wenn der Finger den Bildschirm berührt. Wenn es früh genug veröffentlicht wird, wird es dann ausgelöst mousedown, mouseup, touchend und schlussendlich click Veranstaltungen.

Im Falle von langer TippNach ungefähr einer halben Sekunde feuert es mousedown und mouseup, und touchend wenn der Finger gehoben wird, mit Nein click Ereignis am Ende.

Wenn du bewege deinen Finger, es feuert ein touchmove Ereignis ein paar Mal, dann feuert es ein touchcancel Ereignis, und nichts passiert danach, nicht einmal ein touchend Ereignis beim Anheben des Fingers.

EIN Doppeltipp löst die Zoom-In / Out-Funktionen aus, aber im Event-Modus wird die Combo ausgelöst touchstart-touchevent zweimal, ohne dass Mausereignisse ausgelöst wurden.

Feuerfuchs für Android feuert korrekt das touchstart Ereignis und bei kurzen Stichflammen mousedown, mouseup, touchend und click danach.

Im Falle von langer Tippes feuert mousedown, mouseup und schlussendlich touchend Veranstaltungen. Es ist das gleiche von Chrome für diese Dinge.

Aber wenn du bewege deinen Fingerwenn Brände touchmove kontinuierlich (wie man erwarten kann), aber es tut es nicht nicht feuern die touchleave Ereignis, wenn der Finger das Element mit dem Ereignis - Listener verlässt und nicht auslöst touchcancel Ereignis, wenn der Finger das Browser-Ansichtsfenster verlässt.

Zum DoppelhähneEs verhält sich genau wie Chrome.

Opernmobile macht die gleiche Sache von Chrome und Firefox für einen kurzen Tipp, aber im Falle eines langen drücken aktiviert eine Art von Sharing-Funktion, die ich wirklich deaktivieren möchte. Wenn Sie Ihren Finger bewegen oder zweimal tippen, verhält er sich wie Firefox.

Chrome Beta tut das übliche für kurze tipps, aber bei langen zapfungen schießt es nicht mouseup Ereignis mehr, nur touchstart, dann mousedown nach einer halben Sekunde dann touchend wenn der Finger gehoben wird. Wenn der Finger bewegt wird, verhält es sich jetzt wie Firefox und Opera Mobile.

Im Falle von DoppelhähneEs löst keine Berührungsereignisse aus beim Herauszoomen, aber nur beim Einzoomen.

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

Die Frage ist: Gibt es einen einfachen Weg, um in den gebräuchlichsten Browsern von Touch-Geräten zu versuchen, kurze Taps, lange Taps und doppelte Taps zu erkennen?

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


76
2018-01-23 18:31


Ursprung


Antworten:


Wenn Sie das nicht bereits getan haben, würde ich vorschlagen, den Quellcode für Hammer.js zu lesen

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

Zwischen Kommentaren und Code sind es etwa 1400 Zeilen, es gibt großartige Dokumentation und der Code ist einfach zu verstehen.

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

halten, tippen, doubletap, ziehen, dragstart, dragend, dragup, dragdown,   dragleft, dragright, wischen, swipeup, swipedown, swipeleft, swiperight,   transformieren, transformieren, transformieren, drehen, kneifen, pinchin,   Ausschneidung, Berührung (Gestenerkennung startet), Freigabe (Gestenerkennung   endet)

Ich denke, nach dem Lesen des Quellcodes werden Sie viel besser verstehen, wie Berührungsereignisse funktionieren und wie Sie feststellen können, welche Ereignisse der Browser verarbeiten kann.

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


24
2017-09-06 18:34



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

Das Wesentliche ist, im Wesentlichen löst alles aus mouseover und verwandte Ereignisse; die meisten lösen auch Berührungsereignisse aus, die gewöhnlich vollständig (erreichen touchend) Vor mouseover und dann weiter zu click (es sei denn, eine Änderung am Seiteninhalt macht dies rückgängig). Diese peinlichen Ausnahmen sind zum Glück relativ selten (3rd Party Android Browser und Blackberry Playbook).

Diese verknüpfte Ressource ist beeindruckend detailliert. Hier finden Sie eine Auswahl der ersten drei von vielen, vielen Betriebssystem-, Geräte- und Browser-Tests:

enter image description here

Um einige der wichtigsten Punkte zusammenzufassen:

Mobile Browser

  • Alle aufgelisteten Browser werden ausgelöst mouseover beim ersten Tippen. Nur einige Windows Phone-Browser lösen es beim zweiten Tippen aus.
  • Alle auslösen click. Es gibt nicht an, welche abbrechen click ob mouseover ändert die Seite (ich glaube die meisten tun)
  • Die meisten Browser werden ausgelöst mouseover nach touchstart und touchend. Dazu gehören iOS7.1 Safari, Android-Standard, Chrome, Opera und Firefox für Android und einige (nicht alle Windows-Telefon-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 ausgelöst mouseover  nach  touchstart und touchend.
  • Nur Blackberry Playbook löst aus mouseover zwischen touchstart und touchend
  • Nur Opera Mini und Puffin (3rd Party Android Browser) fehlen touchstart oder touchend.

Desktop-Browser

  • Relativ aktuelle Versionen von Desktop Chrome und Opera verhalten sich wie ihre mobilen Gegenstücke, touchstart und touchend gefolgt von mouseover.
  • Firefox- und Microsoft-Browser (IE <= 11 und viele Edge-Versionen) lösen keine aus touchstart und touchend Veranstaltungen.
  • Keine Daten auf Macs, aber vermutlich keine Ma-Browser-Unterstützung touchstart und touchendangesichts der Knappheit von Mac-Touchscreen-Schnittstellen.

Es gibt auch eine unglaubliche Menge an Daten in Browsern mit assistiven Technologien kombiniert.


8
2017-09-13 18:51



Hier ist meine neueste Beobachtung zu Touch- und Mausereignissen auf Android 4.3

Opera, Firefox und Chrome scheinen ein Standardverhalten zu haben

  1. Auf Wischen (Touchstart-Touchmove-Touchend):

    1. Es wird kein Mausereignis (außer Mouseover) ausgelöst.
    2. Mouseover wird nur ausgelöst, wenn Touchstart und Touchend für dasselbe Element ausgeführt werden. (touchstart-touchmove-touchend-mouseover)
    3. Wenn der Standard beim Touchstart nicht möglich ist, funktioniert das standardmäßige Swipe-Verhalten nicht. Es gibt keine Änderungen in Bezug auf das Auslösen von Mausereignissen.
  2. Auf Knopfdruck (Touchstart-Touchend):

    1. Alle Mausereignisse Mouseover-MouseMove-MouseDown MouseUp-Klick Feuer nach einer Verzögerung
    2. Wenn der Standard beim Touchstart verhindert wird, wird nur der Mouseover ausgelöst.

Der standardmäßige Android-Browser 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 bei Tippen ausgelöst, auch wenn der Standard beim Berührungsstart verhindert wird.

3
2017-12-18 15:19



Ja, Sie können einen Timer starten beitouchstart und beende es touchend und treffen Sie Ihre Wahl von dort.

Sie können auch machen ... sagen wir wischen, meine Auslösung touchmove Sie können die Koordinate des "Fingers" bekommen und sehen, wie viel ich vorher gereist bin touchend wird ausgelöst.

Ich weiß nicht, ob es eine einfachere Möglichkeit gibt, als eine Touch-Ereignisbibliothek zu verwenden, aber ich nehme an, Sie könnten eine für einfache "Tippen", "Doppeltippen", "Streichen" -Ereignisse ziemlich einfach schreiben.


2
2018-01-23 18:34