Ty i Twoi użytkownicy potrzebujecie aplikacji internetowych, które płynnie reagują na dotknij. Stworzenie ich powinno być łatwe, ale niestety, jak bardzo internet mobilny przeglądarki reagują na zdarzenia dotyku w trakcie przewijania jako implementacja w specyfikacji TouchEvent. Jako W efekcie podejścia można podzielić na mniej więcej 4 kategorie. Ten naraża na nią zasadniczy problem z płynnością przewijania, oraz zachowanie kontroli dla deweloperów.
Cztery różne modele przetwarzania zdarzeń dotyku?
Różnice w zachowaniu między przeglądarkami dzielą się na 4 modele.
Normalne synchroniczne przetwarzanie zdarzeń
Zdarzenia Touchmove są wysyłane podczas przewijania, a każda aktualizacja przewijania jest blokowana do momentu zakończenia obsługi przesuwania dotykiem. Jest to najprostsze do zrozumienia, a jednocześnie najskuteczniejsze, ale niekorzystne dla wydajności przewijania, ponieważ każda klatka podczas przewijania musi być blokowana w wątku głównym.
Przeglądarki: przeglądarka na Androidzie (Android 4.0.4 i 4.3), mobilna Safari (podczas przewijania elementu div)
Asynchroniczne przetwarzanie ruchu dotykowego
Zdarzenia Touchmove są wysyłane w trakcie przewijania, ale przewijanie może być realizowane asynchronicznie (zdarzenie Touchmove jest ignorowane po rozpoczęciu przewijania). Może to doprowadzić do „podwójnej obsługi”. zdarzeń, np. kontynuowanie przewijania po wykonaniu przez witrynę jakiegoś działania z użyciem klawisza Touchmove i wywołania preventDefault w zdarzeniu, co informuje przeglądarkę, że nie powinna tego robić.
Przeglądarki: Mobile Safari (podczas przewijania dokumentu), Firefox
Funkcja Touchmove została pominięta podczas przewijania
Zdarzenia Touchmove nie są wysyłane po rozpoczęciu przewijania i nie wznawiają się, dopóki nie nastąpi dotknięcie. W tym modelu trudno jest odróżnić nieruchomy dotyk od przewijania.
Przeglądarki: Samsung Browser (wysłane wydarzenia myszki)
Anulowanie dotknięcia przy rozpoczęciu przewijania
Nie da się zrobić tego na oba sposoby – płynności przewijania i kontrola programistyczna. Ten model przedstawia kompromis między płynnym przewijaniem a obsługą zdarzeń, podobnie jak w przypadku semantyki specyfikacji zdarzeń wskaźnika. Niektóre funkcje, które mogą wymagać śledzenia palca, takie jak odświeżanie przez przeciągnięcie, są niemożliwe.
Przeglądarki: Chrome na komputery w wersji M32 lub nowszej, Chrome na Androida
Po co zmieniać?
Chrome na Androida używa obecnie starego modelu Chrome: funkcji Anulowanie dotknięcia przy przewijaniu rozpoczyna się, co zwiększa wydajność przewijania, ale jest dezorientujące dla programistów. Niektórzy deweloperzy nie wiedzą o zdarzeniu funkcji Anulowanie dotknięcia ani o tym, jak: i w związku z tym niektóre witryny załamują się. Co ważniejsze, całą klasę efektów i zachowań przewijania w interfejsie, takich jak pull-to-refresh. ukryte paski i punkty przyciągania są trudne lub niemożliwe do zaimplementowania; cóż.
Aby je obsługiwać, nie można dodawać specjalnie zakodowanych na stałe funkcji Chrome koncentruje się na dodawaniu elementów podstawowych platformy, które umożliwiają programistom do bezpośredniego wdrożenia tych efektów. Zapoznaj się z artykułem na temat racjonalnej platformy internetowej. aby ogólnie zapoznać się z tą filozofią.
Nowy model Chrome: ograniczony model Async Touchmove
W Chrome wprowadzamy nowe działanie
zaprojektowany z myślą o poprawie zgodności z kodem napisanym dla innych przeglądarek, gdy
przewijanie, a także inne scenariusze,
które zależą od ruchu dotykowego
zdarzeń podczas przewijania. Ta funkcja jest domyślnie włączona, ale możesz ją włączyć
wyłączona przy użyciu tej flagi: chrome://flags\#touch-scrolling-mode.
Nowy sposób działania:
- Pierwszy ruch dotykowy jest wysyłany synchronicznie, aby umożliwić przewijanie anulowano
- Podczas aktywnego przewijania
- Zdarzenia Touchmove są wysyłane asynchronicznie
- ograniczony do 1 zdarzenia na 200 ms lub jeśli region spadków usługi porównywania cen 15px przekroczono
- Pole Event.cancelable ma wartość false.
- W przeciwnym razie przy aktywnym przewijaniu zdarzenia dotyku są uruchamiane synchronicznie w zwykły sposób. koń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 obejrzeć tę prezentację w Chrome na Androida i przełączyć
chrome://flags\#touch-scrolling-mode, aby zobaczyć różnicę.
Powiedz nam, co myślisz
Model Async Touchmove może usprawnić wiele przeglądarek i włącz nową klasę efektów gestów dotykowych. Interesuje nas poznawać opinie programistów i zobaczyć, co można zrobić z nim.