Właściwość CSS touch-action umożliwia deweloperowi ograniczenie możliwości interakcji użytkownika z elementem, co szczególnie pomaga zapobiegać wysyłaniu zdarzeń, gdy nie jest 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 prezentacji ekranu z prawej i środkowej 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.
W tym filmie pokazano pan-right i pan-down, które wymagają gestów rozpoczynających się odpowiednio 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 dotyku, 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).
Ściąganie palców na stronie powoduje zazwyczaj powiększenie jej zawartości.
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ć.