Các touch-actionbất động sản trong CSS cho phép bạn kiểm soát ảnh hưởng của tương tác màn hình cảm ứng với một phần tử, tương tự như càng rộng rãi sử dụng pointer-eventstài sản dùng để tương tác điều khiển chuột.
#element ( touch-action: pan-right pinch-zoom; )Các touch-actiontài sản là hữu ích chủ yếu cho các yếu tố giao diện người dùng tương tác mà cần hành vi hơi khác nhau tùy thuộc vào loại thiết bị được sử dụng. Khi người dùng của bạn có thể mong đợi một phần tử hoạt động theo một cách cụ thể với chuột và hành vi hơi khác trên màn hình cảm ứng, touch-actionsẽ có ích.
Ví dụ rõ ràng nhất về điều này là yếu tố bản đồ tương tác. Nếu bạn đã từng xem bản đồ không được thiết kế để hoạt động với các thiết bị cảm ứng, có thể bạn đã cố gắng chụm và thu phóng chỉ để tìm thấy trình duyệt phóng đại phần tử, nhưng không thực sự thu phóng bản đồ thực.
Theo mặc định, trình duyệt sẽ tự động xử lý các tương tác chạm: Chụm để thu phóng, vuốt để cuộn, v.v. Cài đặt touch-actionthành nonesẽ vô hiệu hóa tất cả trình duyệt xử lý các sự kiện này, để bạn thực hiện (thông qua JavaScript). Nếu bạn chỉ muốn thực hiện một lần tương tác, hãy yêu cầu trình duyệt xử lý phần còn lại. Ví dụ, nếu bạn đã viết một số mã JavaScript mà chỉ xử lý phóng to, bạn có thể nói với các trình duyệt để xử lý tất cả mọi thứ khác với khách sạn này: touch-action: pan-x pan-y;.
Xem các ví dụ về Pen về thao tác chạm của CSS-Tricks (@ css-trick) trên CodePen.
Cú pháp
touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulationGiá trị
Các touch-actionbất động sản chấp nhận các giá trị sau:
auto: Cho phép trình duyệt xử lý tất cả các tương tác xoay và thu phóng.none: Tắt các trình duyệt xử lý tất cả các tương tác xoay và thu phóng. Điều này mở ra khả năng xác định tùy chỉnh các tương tác đó trong JavaScript.pan-x: Cho phép di chuyển theo chiều ngang với một thao tác tương tác ngón tay. Nó là viết tắt chopan-leftvàpan-rightgiá trị, nhưng có thể được dùng kết hợp vớipan-y,pan-up,pan-downvàpinch-zoom.pan-yCho phép quét dọc bằng một thao tác tương tác ngón tay. Nó là viết tắt chopan-upvàpan-downgiá trị, nhưng có thể được dùng kết hợp vớipan-x,pan-left,pan-rightvàpinch-zoom.manipulation: Bật tương tác chụm và thu phóng nhưng vô hiệu hóa các tương tác khác mà bạn có thể tìm thấy trên một số thiết bị, chẳng hạn như nhấn đúp để thu phóng. Nó là viết tắt của sự kết hợp củapan-x pan-y pinch-zoom.pan-left(Thử nghiệm): Cho phép tương tác với một ngón tay khi ngón tay của người dùng di chuyển sang bên phải và hướng về bên trái.pan-right(Thử nghiệm): Cho phép tương tác với một ngón tay khi ngón tay của người dùng di chuyển sang trái và xoay về phía bên phải.pan-down(Thử nghiệm): Cho phép tương tác với một ngón tay khi ngón tay của người dùng di chuyển lên trên và hướng xuống dưới.pan-up(Thử nghiệm): Cho phép một ngón tay tương tác khi ngón tay của người dùng di chuyển xuống và hướng lên trên.pinch-zoom: Cho phép tương tác nhiều ngón tay và có thể được kết hợp với bất kỳpan-giá trị nào khác .
Có liên quan
pointer-events
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 36 | 52 | 10 * | 12 | Không |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 13.0-13.1 |
Safari là một thiếu sót rõ ràng để hỗ trợ thao tác chạm. iOs Safari có hỗ trợ hạn chế, chỉ dành cho các giá trị autovà manipulation.
thông tin thêm
- Sự kiện con trỏ Thông số kỹ thuật cấp độ 2 - Thông số này hiện nằm trong Đề xuất ứng viên nhưng dự định sẽ chuyển sang Đề xuất được đề xuất vào đầu năm 2019, kể từ khi viết bài này. Mục đích là tài liệu sẽ trở thành một Khuyến nghị chính thức của W3C.
- Tài liệu MDN
- Mẫu thuộc tính CSS pinch-zoom bằng thao tác chạm - Bản trình diễn của Google Chrome về việc triển khai nó.
- Vé WebKit Bugzilla # 133112 - Mở vé để đề xuất hỗ trợ Safari. Thêm phiếu bầu của bạn để tăng nó lên.