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 truyền màn hình ở giữa và bên phải là:
.pan-x {
touch-action: pan-x;
}
.pan-y {
touch-action: pan-y;
}
Trong Chrome 55, bạn đã thêm pan-left, pan-right, pan-up và pan-down. 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 yêu cầu 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, thực ra bạn có thể 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.