CSStouch-action cho browser biết thao tác chạm nào nó được xử lý, phần còn lại nhường cho JS của bạn.
css
.canvas { touch-action: none; } /* JS xử lý hết: vẽ, game, gesture riêng */
.btn { touch-action: manipulation; } /* bỏ double-tap zoom → mất độ trễ 300ms */
.carousel { touch-action: pan-y; } /* chỉ cho cuộn dọc; ngang để JS bắt swipe */
.map { touch-action: pinch-zoom; }| Giá trị | Browser giữ | JS nhận |
|---|---|---|
auto | tất cả | phần còn lại |
none | không gì | toàn bộ |
manipulation | pan + pinch | double-tap |
pan-x / pan-y | cuộn một chiều | chiều còn lại |
Giá trị quan trọng nhất trong thực tế là manipulation: browser không cần chờ xem người dùng có chạm lần hai để zoom hay không, nên click bắn ngay — bỏ được độ trễ khoảng 300ms trên một số trình duyệt mobile.
Các giá trị này còn quyết định browser có thể cuộn trên luồng riêng hay không. Đó là lý do touch-action ảnh hưởng trực tiếp tới độ mượt khi cuộn, không chỉ tới gesture.
Lưu ý 1: touch-action: none trên vùng lớn chặn luôn cuộn trang — người dùng kẹt, không cuộn tiếp được. Chỉ đặt lên đúng phần tử cần.
Lưu ý 2: đặt none rồi quên gọi preventDefault() trong handler, hoặc ngược lại — hai cơ chế này bổ sung cho nhau, không thay thế nhau.