Ty i Twoi użytkownicy chcecie, aby aplikacje internetowe na urządzenia mobilne płynnie reagowały na dotyk i przewijały się. Ich tworzenie powinno być proste, ale sposób, w jaki przeglądarki mobilne reagują na zdarzenia dotykowe podczas przewijania, jest pozostawiony do implementacji w specyfikacji TouchEvent. W związku z tym metody można podzielić na 4 kategorie. Ta sytuacja ujawnia fundamentalny konflikt między zapewnieniem płynności przewijania a zachowaniem kontroli dewelopera.
4 różne modele przetwarzania zdarzeń dotykowych?
Różnice w zachowaniu między przeglądarkami można podzielić na 4 modele.
Normalne synchroniczne przetwarzanie zdarzeń
Zdarzenia dotyku są wysyłane podczas przewijania, a każda aktualizacja przewijania blokuje się, dopóki nie zostanie zakończone przetwarzanie zdarzenia dotyku. Jest to najprostsze i najskuteczniejsze rozwiązanie, ale ma negatywny wpływ na wydajność podczas przewijania, ponieważ podczas przewijania każdy element musi blokować główny wątek.
Przeglądarki: Android Browser (Android 4.0.4, 4.3), Mobile Safari (podczas przewijania div)
Asynchroniczne przetwarzanie zdarzeń touchmove
Zdarzenia touchmove są wysyłane podczas przewijania, ale przewijanie może odbywać się asynchronicznie (zdarzenie touchmove jest ignorowane po rozpoczęciu przewijania). Może to spowodować „podwójne przetwarzanie” zdarzeń, np. kontynuowanie przewijania po tym, jak witryna wykonała jakąś akcję z touchmove i wywołała preventDefault w związku z tym zdarzeniem, informując przeglądarkę, że nie ma ona tego obsługiwać.
Przeglądarki: Safari na urządzenia mobilne (podczas przewijania dokumentu), Firefox
Wyłączenie dotykania podczas przewijania
Po rozpoczęciu przewijania zdarzenia dotyku nie są wysyłane i nie są wznawiane do momentu wystąpienia zdarzenia dotknięcie zakończone. W tym modelu trudno odróżnić dotknięcie bez przesunięcia od przewijania.
Przeglądarki: przeglądarka Samsung (wysyłane zdarzenia mousemove)
Dotknij, aby anulować przewijanie
Nie można mieć jednocześnie płynnego przewijania i kontroli dewelopera. Ten model wyraźnie pokazuje kompromis między płynnym przewijaniem a obsługą zdarzeń, podobnie jak semantyka specyfikacji zdarzeń wskaźnika. Niektóre funkcje, które wymagają śledzenia palca, np. przeciąganie w dół w celu odświeżenia, nie są możliwe.
Przeglądarki: Chrome na komputery M32+, Chrome na Androida
Dlaczego wprowadzamy zmianę
Chrome na Androida używa obecnie starego modelu Chrome: touchcancel on scroll start, który poprawia wydajność przewijania, ale wprowadza zamieszanie wśród programistów. W szczególności niektórzy deweloperzy nie znają zdarzenia touchcancel ani nie wiedzą, jak sobie z nim radzić, co spowodowało awarię niektórych witryn. Co ważniejsze, cała klasa efektów i zachowań związanych z przewijaniem interfejsu, takich jak przeciąganie do odświeżenia, paski ukryte czy punkty zaczepienia, jest trudna lub niemożliwa do prawidłowego wdrożenia.
Zamiast dodawać funkcje zaszyte na stałe, które obsługują te efekty, Chrome skupia się na dodawaniu prymitywnych funkcji platformy, które umożliwiają deweloperom bezpośrednie wdrażanie tych efektów. Ogólne omówienie tej filozofii znajdziesz w artykule A Rational Web Platform.
Nowy model Chrome: ograniczony asynchroniczny model dotyku
W Chrome wprowadzamy nowe zachowanie, które ma na celu poprawę zgodności z kodem napisanym dla innych przeglądarek podczas przewijania, a także umożliwienie innych scenariuszy, które zależą od uzyskiwania zdarzeń dotyku podczas przewijania. Ta funkcja jest domyślnie włączona. Możesz ją wyłączyć za pomocą tej flagi: chrome://flags\#touch-scrolling-mode.
Nowe zachowanie:
- Pierwsze dotknięcie jest wysyłane synchronicznie, aby umożliwić anulowanie przewijania.
- Podczas aktywnego przewijania
- zdarzenia touchmove są wysyłane asynchronicznie,
- ograniczona do 1 zdarzenia na 200 ms lub jeśli przekroczysz region tolerancji 15 pikseli usługi porównywania cen.
- Event.cancelable ma wartość false (fałsz).
- W przeciwnym razie zdarzenia dotyku wyzwalane są synchronicznie jak zwykle, gdy aktywne przewijanie kończy się lub nie jest możliwe, ponieważ osiągnięto limit przewijania.
- Zdarzenie touchend występuje zawsze, gdy użytkownik podnosi palec
Możesz wypróbować to demo w Chrome na Androida i przełączyć flagę chrome://flags\#touch-scrolling-mode, aby zobaczyć różnicę.
Powiedz nam, co myślisz
Model asynchronicznego dotykania może poprawić kompatybilność między przeglądarkami i umożliwić nową klasę efektów gestów dotykowych. Chcielibyśmy poznać opinie deweloperów i zobaczyć, jakie kreatywne rozwiązania można zastosować w przypadku tej funkcji.