Thuộc tính CSS touch-action cho phép nhà phát triển hạn chế cách người dùng có thể tương tác với một phần tử. Phần tử này đặc biệt hữu ích trong việc ngăn việc gửi các sự kiện khi không cần thiết.
Trước phiên bản 55, Chrome hỗ trợ pan-x và pan-y, trong đó hạn chế các phần tử cuộn theo một hướng.
Video dưới đây là ví dụ về một phần tử không xác định hành động chạm (bên trái), cũng như pan-x và pan-y (ở giữa và bên phải).
CSS dành cho video ghi lại chuyển động ở giữa và bên phải:
.pan-x {
touch-action: pan-x;
}
.pan-y {
touch-action: pan-y;
}
Trong Chrome 55, pan-left, pan-right, pan-up và pan-down đã được thêm. Các thuộc tính này có sự khác biệt nhỏ nhưng quan trọng về hành vi.
Các thuộc tính này buộc người dùng bắt đầu các cử chỉ theo một hướng trước khi phần tử đó phản hồi. Điều này tương tự như cử chỉ "kéo để làm mới" chỉ phản hồi khi người dùng cử chỉ hướng xuống trên màn hình.
Video sau đây minh hoạ pan-right và pan-down, trong đó có các cử chỉ để bắt đầu lần lượt từ phải sang trái và từ dưới lên trên.
Sau khi cử chỉ bắt đầu, bạn thực sự có thể
di chuyển qua lại. Đó chỉ là hướng ban đầu bị ảnh hưởng.
Mặc dù video minh hoạ hành vi này, nhưng bạn có thể thấy dễ dàng hơn khi tự thử bằng cách xem mẫu.
CSS cho bản minh hoạ này là:
.pan-right {
touch-action: pan-right;
}
.pan-down {
touch-action: pan-down;
}
Điều cuối cùng xảy ra trong thế giới thao tác chạm là thuộc tính pinch-zoom. Đây là thuộc tính mới trong Chrome 55, nằm sau cờ và có thể dùng với bất kỳ tuỳ chọn kéo nào (ví dụ: pan-x, pan-y, pan-left, pan-right, pan-down, pan-up).
Thông thường, nếu bạn chụm trên một trang web, trang web đó sẽ phóng to nội dung của trang.
Việc xác định touch-action sẽ ngăn hành vi này, nhưng việc thêm tính năng chụm-thu phóng sẽ kích hoạt lại hành vi này.
Video này cho thấy sự khác biệt giữa touch-action: pan-x và touch-action: pan-x pinch-zoom;
Tất cả các thuộc tính này phải đơn giản hoá một số logic mà nhà phát triển sẽ cần triển khai bằng cách sử dụng pointer-events.