Thuộc tính CSS touch-action cho phép nhà phát triển hạn chế cách người dùng tương tác với một phần tử. Điều này đặc biệt hữu ích để ngăn các sự kiện được gửi khi không cần thiết.
Trước phiên bản 55, Chrome hỗ trợ pan-x và pan-y để hạn chế các phần tử cuộn theo một hướng.
Video bên dưới cho thấy ví dụ về một phần tử không có hành động chạm được xác định (bên trái), cũng như pan-x và pan-y (ở giữa và bên phải).
CSS cho bản ghi màn hình tay giữa và tay phải là:
.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 vào. 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 phải bắt đầu cử chỉ theo một hướng trước khi phần tử phản hồi. Thao tác này tương tự như cử chỉ "kéo để làm mới" chỉ phản hồi khi người dùng thực hiện cử chỉ kéo xuống trên màn hình.
Video sau đây minh hoạ pan-right và pan-down, trong đó yêu cầu các cử chỉ bắt đầu từ phải sang trái và từ dưới lên trên tương ứng.
Sau khi cử chỉ bắt đầu, bạn có thể thực sự
kéo qua lại. Chỉ hướng ban đầu mới bị ảnh hưởng.
Mặc dù video này minh hoạ hành vi này, nhưng bạn có thể dễ dàng 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 đang xảy ra trong thế giới thao tác chạm là thuộc tính pinch-zoom. Đây là một thuộc tính mới trong Chrome 55, đằng sau một cờ, có thể được sử dụng với bất kỳ tuỳ chọn kéo nào (tức là pan-x, pan-y, pan-left, pan-right, pan-down, pan-up).
Nếu bạn chụm vào một trang web, thì trang web đó thường sẽ phóng to nội dung trên 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ẽ bậ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 sẽ đơn giản hoá một số logic mà nhà phát triển cần triển khai bằng pointer-events.