touch-action
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2019.
* Some parts of this feature may have varying levels of support.
Thuộc tính touch-action của CSS đặt cách vùng của một phần tử có thể được thao tác bởi người dùng màn hình cảm ứng (ví dụ: bằng các tính năng thu phóng tích hợp trong trình duyệt).
Theo mặc định, việc cuộn (panning) và cử chỉ chụm ngón tay (pinching) được xử lý độc quyền bởi trình duyệt. Một ứng dụng sử dụng Sự kiện con trỏ sẽ nhận được sự kiện pointercancel khi trình duyệt bắt đầu xử lý một cử chỉ chạm. Bằng cách chỉ định rõ ràng những cử chỉ nào nên được trình duyệt xử lý, ứng dụng có thể cung cấp hành vi của riêng mình trong các trình lắng nghe pointermove và pointerup cho các cử chỉ còn lại. Các ứng dụng sử dụng Sự kiện chạm tắt tính năng xử lý cử chỉ của trình duyệt bằng cách gọi preventDefault(), nhưng cũng nên sử dụng touch-action để đảm bảo trình duyệt biết ý định của ứng dụng trước khi bất kỳ trình lắng nghe sự kiện nào được gọi.
Khi một cử chỉ bắt đầu, trình duyệt giao nhau các giá trị touch-action của phần tử được chạm và các phần tử tổ tiên của nó, lên đến phần tử triển khai cử chỉ (nói cách khác, phần tử cuộn đầu tiên chứa nó). Điều này có nghĩa là trong thực tế, touch-action thường chỉ được áp dụng cho các phần tử cấp cao nhất có một số hành vi tùy chỉnh, mà không cần chỉ định touch-action rõ ràng trên bất kỳ phần tử con nào của phần tử đó.
Note:
Sau khi một cử chỉ bắt đầu, các thay đổi đối với touch-action sẽ không có bất kỳ tác động nào lên hành vi của cử chỉ hiện tại.
Cú pháp
/* Giá trị từ khóa */
touch-action: auto;
touch-action: none;
touch-action: pan-x;
touch-action: pan-left;
touch-action: pan-right;
touch-action: pan-y;
touch-action: pan-up;
touch-action: pan-down;
touch-action: pinch-zoom;
touch-action: manipulation;
/* Giá trị toàn cục */
touch-action: inherit;
touch-action: initial;
touch-action: revert;
touch-action: revert-layer;
touch-action: unset;
Thuộc tính touch-action có thể được chỉ định là một trong:
- Một trong các từ khóa
auto,none,manipulation, hoặc - Một trong các từ khóa
pan-x,pan-left,pan-rightvà/hoặc một trong các từ khóapan-y,pan-up,pan-down, cộng thêm tùy chọn từ khóapinch-zoom.
Giá trị
auto-
Cho phép trình duyệt xử lý tất cả cử chỉ cuộn và thu phóng.
none-
Tắt tính năng xử lý tất cả cử chỉ cuộn và thu phóng của trình duyệt.
pan-x-
Cho phép cử chỉ cuộn ngang bằng một ngón tay. Có thể kết hợp với pan-y, pan-up, pan-down và/hoặc pinch-zoom.
pan-y-
Cho phép cử chỉ cuộn dọc bằng một ngón tay. Có thể kết hợp với pan-x, pan-left, pan-right và/hoặc pinch-zoom.
manipulation-
Cho phép cử chỉ cuộn và chụm ngón tay thu phóng, nhưng tắt các cử chỉ không chuẩn bổ sung như nhấn đúp để thu phóng. Việc tắt nhấn đúp để thu phóng giúp trình duyệt không cần trì hoãn việc tạo sự kiện click khi người dùng nhấn vào màn hình. Đây là bí danh cho "pan-x pan-y pinch-zoom" (cũng vẫn hợp lệ vì lý do tương thích).
pan-left,pan-right,pan-up,pan-down-
Cho phép cử chỉ một ngón tay bắt đầu bằng cách cuộn theo hướng đã cho. Sau khi cuộn bắt đầu, hướng vẫn có thể bị đảo ngược. Lưu ý rằng cuộn "lên" (pan-up) có nghĩa là người dùng đang kéo ngón tay xuống trên bề mặt màn hình, và tương tự pan-left có nghĩa là người dùng đang kéo ngón tay sang phải. Nhiều hướng có thể được kết hợp trừ khi có biểu diễn đơn giản hơn (ví dụ: "pan-left pan-right" không hợp lệ vì "pan-x" đơn giản hơn, nhưng "pan-left pan-down" là hợp lệ).
pinch-zoom-
Cho phép cuộn và thu phóng trang bằng nhiều ngón tay. Có thể kết hợp với bất kỳ giá trị pan- nào.
Khả năng tiếp cận
Khai báo touch-action: none; có thể ngăn cản khả năng thu phóng của trình duyệt. Điều này sẽ ngăn những người có vấn đề về thị lực đọc và hiểu nội dung trang.
Định nghĩa chính thức
| Initial value | auto |
|---|---|
| Applies to | all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |
Cú pháp chính thức
touch-action =
auto |
none |
[ [ pan-x | pan-left | pan-right ] || [ pan-y | pan-up | pan-down ] || pinch-zoom ] |
manipulation
Ví dụ
Tắt tất cả cử chỉ
Cách sử dụng phổ biến nhất là tắt tất cả cử chỉ trên một phần tử (và các phần tử con không cuộn được) cung cấp hành vi kéo và thu phóng riêng của nó — chẳng hạn như bản đồ hoặc bề mặt trò chơi.
HTML
<div id="map"></div>
CSS
#map {
height: 150vh;
width: 70vw;
background: linear-gradient(blue, green);
touch-action: none;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| Compatibility # touch-action |
| Pointer Events # the-touch-action-css-property |
Khả năng tương thích trình duyệt
Xem thêm
pointer-events- Sự kiện con trỏ
- Blog WebKit More Responsive Tapping on iOS
- Blog Google Developers Making touch scrolling fast by default
- Scroll Snap