Sie und Ihre Nutzer wünschen sich mobile Web-Apps, die schnell reagieren und berühren. Ihre Entwicklung sollte einfach sein, aber leider ist Browser auf Berührungsereignisse beim Scrollen reagieren, wird als Implementierung links angezeigt. in der TouchEvent-Spezifikation. Als lassen sich Ansätze grob in 4 Kategorien unterteilen. Dieses bringt ein fundamentales Spannungspotenzial auf, die Kontrolle über die Entwicklung zu behalten.
Vier verschiedene Modelle der Verarbeitung von Touch-Ereignissen?
Die Verhaltensunterschiede zwischen den Browsern lassen sich in vier Modelle unterteilen.
Normale synchrone Ereignisverarbeitung
Touchmove-Ereignisse werden beim Scrollen gesendet und jedes Scroll-Update wird blockiert, bis die Touchmove-Verarbeitung abgeschlossen ist. Dies ist zwar am einfachsten zu verstehen und am effektivsten, aber schlecht für die Scroll-Leistung, da es bedeutet, dass jeder Frame während des Scrollens im Hauptthread blockiert werden muss.
Browser: Android-Browser (Android 4.0.4 und 4.3), Safari (beim Scrollen von div-Elementen)
Asynchrone Touchmove-Verarbeitung
Touchmove-Ereignisse werden während des Scrollens gesendet, das Scrollen kann jedoch asynchron fortgesetzt werden (das Touchmove-Ereignis wird nach Beginn des Scrollens ignoriert). Dies kann zu einer „doppelten Bearbeitung“ führen. Das ist beispielsweise der Fall, wenn auf der Website weitergescrollt wird, nachdem die Touchmove-Aktion ausgeführt und preventDefault für das Ereignis aufgerufen wird. Der Browser wird angewiesen, das Ereignis nicht zu verarbeiten.
Browser: Safari (beim Scrollen im Dokument), Firefox
Touchmove unterdrückt beim Scrollen
Touchmove-Ereignisse werden erst gesendet, nachdem das Scrollen begonnen hat, und werden erst nach dem touchend-Ereignis fortgesetzt. Bei diesem Modell ist es schwierig, zwischen einer unbeweglichen Berührung und einer Schriftrolle zu unterscheiden.
Browser: Samsung-Browser (mousemove-Ereignisse gesendet)
Berührung beim Start des Scrollens abbrechen
Sie können es nicht in beide Richtungen – flüssiges Scrollen und Entwicklersteuerung – haben. Dieses Modell macht den Kompromiss zwischen reibungslosem Scrollen und der Ereignisverarbeitung, ähnlich der Semantik der Spezifikation Pointer Events, deutlich. Einige Funktionen, bei denen der Finger möglicherweise erfasst werden muss, z. B. zum Aktualisieren nach unten ziehen, sind nicht möglich.
Browser: Chrome Desktop M32+, Chrome Android
Warum ändern?
Chrome für Android verwendet derzeit das alte Chrome-Modell: beim Scrollen tippen starten, was die Scrollleistung verbessert, aber Entwickler verunsichert. Insbesondere wissen manche Entwickler nicht, und einige Websites funktionieren nicht mehr. Noch wichtiger ist, dass ein der gesamten Klasse von Scrolleffekten und -verhalten auf der Benutzeroberfläche, wie z. B. Pull-to-Refresh, versteckte Balken und Snap-Points sind schwer oder gar nicht zu implementieren. gut.
Anstatt speziell hartcodierte Funktionen zur Unterstützung dieser Effekte hinzuzufügen, Chrome konzentriert sich auf das Hinzufügen von Plattform-Primitiven, die es Entwicklern ermöglichen, diese Effekte direkt umzusetzen. Siehe A Rational Web Platform (in englischer Sprache) finden Sie eine allgemeine Präsentation zu dieser Philosophie.
Das neue Chrome-Modell: das gedrosselte Async Touchmove-Modell
Neues Chrome-Verhalten
wurde entwickelt, um die Kompatibilität mit Code zu verbessern, der für andere Browser geschrieben wurde, wenn
sowie weitere Szenarien ermöglichen, die von Touchmove-Ereignissen abhängig sind,
Ereignisse beim Scrollen. Diese Funktion ist standardmäßig aktiviert und kann
mit dem Flag chrome://flags\#touch-scrolling-mode aus.
Das neue Verhalten ist:
- Der erste Touchmove wird synchron gesendet, damit das Scrollen möglich ist. abgebrochen
- Beim aktiven Scrollen
<ph type="x-smartling-placeholder">
- </ph>
- Touchmove-Ereignisse werden asynchron gesendet
- gedrosselt, d. h. ein Ereignis pro 200 ms, oder eine CSS-Slop-Region von 15px ist überschritten
- Event.cancelable ist false.
- Andernfalls werden touchmove-Ereignisse beim aktiven Scrollen wie gewohnt synchron ausgelöst. wird beendet oder ist nicht möglich, da die Scroll-Grenze erreicht wurde.
- Ein Touchend-Ereignis tritt immer ein, wenn der Nutzer den Finger anhebt.
Sie können diese Demo in Chrome für Android ausprobieren und die
chrome://flags\#touch-scrolling-mode, um den Unterschied zu sehen.
Ihre Meinung zählt
Das Async Touchmove-Modell kann die browserübergreifenden und eine neue Klasse von Effekten für Touch-Gesten ermöglichen. Wir haben Interesse von Entwicklern zu hören und zu sehen, welche kreativen Möglichkeiten ihr bietet, damit nichts.