Właściwość CSS touch-action pozwala deweloperowi ograniczyć sposób, w jaki użytkownik może wchodzić w interakcję z elementem, co jest szczególnie przydatne, aby zapobiegać wysyłaniu zdarzeń, gdy nie jest to konieczne.
W wersjach wcześniejszych niż 55 Chrome obsługiwał atrybuty pan-x i pan-y, które ograniczają przewijanie elementów w jednym kierunku.
Na filmie poniżej widać przykład elementu bez zdefiniowanego dotyku (po lewej) oraz przesunięcie x i Y (w środku i w prawo).
Kod CSS przesyłania ekranu ze środkowej i prawej ręki to:
.pan-x {
touch-action: pan-x;
}
.pan-y {
touch-action: pan-y;
}
W Chrome 55 dodano aplikacje pan-left, pan-right, pan-up i pan-down. Te właściwości mają subtelną, ale istotną różnicę w działaniu.
Te właściwości wymuszają na użytkowniku rozpoczynanie gestów w jednym kierunku, zanim element zareaguje. Przypomina to gest „przeciągnij, by odświeżyć” i reaguje on tylko wtedy, gdy użytkownik przesunie palcem po ekranie w dół.
W tym filmie pokazano pan-right i pan-down, które wymagają gestów przechodzenia odpowiednio od prawej do lewej i od dołu do góry.
Gdy gest się rozpocznie, możesz poruszać się do przodu i do tyłu. Zmieniony zostanie tylko kierunek początkowy.
Chociaż film pokazuje, jak to działa, być może łatwiej będzie Ci samodzielnie sprawdzić te zasady, wyświetlając próbkę.
CSS dla tej wersji demonstracyjnej to:
.pan-right {
touch-action: pan-right;
}
.pan-down {
touch-action: pan-down;
}
Ostatnią rzeczą, która dzieje się w świecie reakcji na dotyk, jest właściwość pinch-zoom. To nowa właściwość w Chrome 55, pod flagą.Można jej używać z dowolnymi opcjami przesuwania (np. pan-x, pan-y, pan-left, pan-right, pan-down, pan-up).
Jeśli ściągniesz palce na stronie internetowej, zazwyczaj powiększy się zawartość stron.
Zdefiniowanie obiektu touch-action zapobiegnie takiemu zachowaniu, ale powiększenie go przez ściągnięcie palców spowoduje jego ponowne włączenie.
Ten film pokazuje różnicę między touch-action: pan-x a touch-action: pan-x pinch-zoom.
Wszystkie te usługi powinny uprościć logikę, którą w innym przypadku musieliby wdrożyć deweloperzy używający pointer-events.