Ty i Twoi użytkownicy potrzebujecie mobilnych aplikacji internetowych, które płynnie reagują na dotyk i przewijają ekran. Ich tworzenie powinno być proste, ale sposób, w jaki przeglądarki mobilne reagują na zdarzenia dotknięcia podczas przewijania, pozostaje dostępny w szczegółach implementacji w specyfikacji TouchEvent. Podejścia można podzielić na 4 kategorie. Pojawia się tu fundamentalny napięcie między zapewnianiem płynności przewijania a zapewnieniem kontroli programisty.
Cztery różne modele przetwarzania zdarzeń dotyku
Różnice w działaniu przeglądarek dzielą się na 4 modele.
Zwykłe synchroniczne przetwarzanie zdarzeń
Zdarzenia przesunięcia dotykiem są wysyłane podczas przewijania, a każdy blok aktualizacji przewijania do momentu zakończenia obsługi tej funkcji. To dobry sposób na najprostszą obsługę wiadomości i największą skuteczność, ale także najgorszą wydajność przewijania, ponieważ każda klatka podczas przewijania musi blokować się w wątku głównym.
Przeglądarki: przeglądarka w Androidzie (Android 4.0.4, 4.3), Mobile Safari (przy przewijaniu elementu div)
Przetwarzanie asynchronicznego ruchu dotykiem
Zdarzenia Touchmove są wysyłane podczas przewijania, ale przewijanie może być kontynuowane asynchronicznie (zdarzenie przesunięcia dotyku jest ignorowane po rozpoczęciu przewijania). Może to prowadzić do „podwójnej obsługi” zdarzeń, np. dalszego przewijania po tym, jak witryna wykona czynność po kliknięciu i wywoła zdarzenie preventDefault w ramach zdarzenia, co uniemożliwi przeglądarce obsługę tego parametru.
Przeglądarki: Mobile Safari (podczas przewijania dokumentu), Firefox
Wstrzymanie ruchu po dotknięciu podczas przewijania
Zdarzenia polegające na przeniesieniu dotyku nie są wysyłane po rozpoczęciu przewijania i nie są wznawiane do czasu zdarzenia Touchend. W tym modelu trudno odróżnić dotyk nieruchomy od przewijania.
Przeglądarki: przeglądarka Samsung (wysłane zdarzenia mysz-move)
Anulowanie kliknięcia po rozpoczęciu przewijania
Nie można stosować obu tych metod – płynności przewijania i kontroli programisty – a 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, jak np. przeciągnięcie, by odświeżyć, nie są możliwe.
Przeglądarki: Chrome na komputery w wersji M32 lub nowszej, Chrome na Androida
Dlaczego warto wprowadzić zmiany?
Chrome na Androida używa obecnie starego modelu: funkcji anulowania dotyku przy uruchamianiu przewijania, która zwiększa wydajność przewijania, ale dezorientuje dewelopera. W szczególności niektórzy deweloperzy nie wiedzą o tym, że zdarzenie anuluje dotknięcie i jak sobie z nim radzić, i dlatego niektóre strony internetowe nie działają. Co więcej, cała klasa efektów i działań związanych z przewijaniem w interfejsie, takich jak przeciągnięcie, aby odświeżyć, ukryte paski i punkty przyciągania, jest trudna lub niemożliwa do prawidłowego wdrożenia.
Zamiast dodawać specjalne funkcje zakodowane na stałe do obsługi tych efektów, Chrome skoncentruje się na dodawaniu podstawowych elementów platformy, które umożliwiają programistom bezpośrednie implementowanie tych efektów. Ogólne przedstawienie tej filozofii znajdziesz na stronie A Rational Web Platform.
Nowy model Chrome: ograniczony asynchroniczny model Touchmove
Wprowadzamy nowy sposób działania, który ma poprawić zgodność z kodem napisanym w innych przeglądarkach podczas przewijania, a także umożliwia korzystanie z innych scenariuszy zależnych od wywoływania zdarzeń przesunięcia dotykiem podczas przewijania. Ta funkcja jest domyślnie włączona. Możesz ją wyłączyć za pomocą tej flagi: chrome://flags\#touch-scrolling-mode.
Nowy sposób działania:
- Pierwszy ruch dotykowy jest wysyłany synchronicznie, aby umożliwić anulowanie przewijania.
- Podczas aktywnego przewijania
- zdarzenia „touchmove” są wysyłane asynchronicznie.
- throttled do 1 zdarzenia na throttled lub przekroczenia regionu zatrzymania throttled CSS
- Event.cancelable ma wartość false
- W przeciwnym razie zdarzenia ruchu dotykowego będą uruchamiane synchronicznie w normalny sposób, gdy aktywne przewijanie zakończy się lub jest niemożliwe z powodu osiągnięcia limitu przewijania.
- Zdarzenie dotknięcia zawsze ma miejsce, gdy użytkownik uniesie palec.
Możesz wypróbować tę prezentację w Chrome na Androida i włączyć flagę chrome://flags\#touch-scrolling-mode, aby zobaczyć różnicę.
Powiedz nam, co myślisz
Asynchroniczny model Touchmove może zwiększyć zgodność z różnymi przeglądarkami i udostępnić nową klasę efektów dotykowych. Chcemy poznać opinie programistów i zobaczyć, co możesz dzięki nim osiągnąć.