Właściwość CSS touch-action pozwala deweloperowi ograniczyć sposób interakcji użytkownika z elementem, co jest szczególnie przydatne, aby zapobiec wysyłaniu zdarzeń, gdy nie jest to konieczne.
Przed wersją 55 przeglądarka Chrome obsługiwała atrybuty pan-x i pan-y, które ograniczają przewijanie elementów w jednym kierunku.
Film poniżej pokazuje przykład elementu bez zdefiniowanej akcji dotykowej (po lewej) oraz gestów przesuwania w osi X i Y (pośrodku i po prawej).
Kod CSS dla nagrań ekranu z prawej i lewej ręki:
.pan-x {
touch-action: pan-x;
}
.pan-y {
touch-action: pan-y;
}
W Chrome 55 dodano pan-left, pan-right, pan-up i pan-down. Te właściwości mają subtelną, ale ważną różnicę w działaniu.
Te właściwości wymuszają na użytkowniku rozpoczęcie gestów w jednym kierunku, zanim element zacznie na nie reagować. Jest to podobne do gestów „przeciągnij, aby odświeżyć”, które działają tylko wtedy, gdy użytkownik przesunie palcem w dół po ekranie.
Na tym filmie demonstrujemy pan-right i pan-down, które wymagają gestów od prawej do lewej i od dołu do góry.
Po rozpoczęciu gestu możesz przesuwać palcem w górę i w dół. Dotyczy to tylko początkowego kierunku.
Film pokazuje to zachowanie, ale łatwiej będzie Ci je sprawdzić samodzielnie, sprawdzając przykład.
Plik CSS użyty w tym przykładzie:
.pan-right {
touch-action: pan-right;
}
.pan-down {
touch-action: pan-down;
}
Ostatnią rzeczą, która ma miejsce w świecie akcji dotykowej, jest właściwość pinch-zoom. To nowa właściwość w Chrome 55, która jest ukryta za flagą i może być używana z dowolną opcją przesuwania (np. pan-x, pan-y, pan-left, pan-right, pan-down, pan-up).
Jeśli rozciągniesz palce na stronie internetowej, zwykle powiększy się zawartość strony.
Zdefiniowanie touch-action zapobiegnie temu, ale dodanie funkcji powiększania za pomocą 2 palców spowoduje ponowne włączenie tej funkcji.
Ten film pokazuje różnicę między wersjami touch-action: pan-x i touch-action: pan-x pinch-zoom.
Wszystkie te właściwości powinny uprościć część logiki, którą deweloperzy korzystający z funkcji pointer-events musieliby w przeciwnym razie zaimplementować.