CSS 屬性 touch-action 用於指定某個給定的區域是否允許用戶操作,以及如何響應用戶操作(比如瀏覽器自帶的划動,縮放等)
默認情況下,平移(滾動) 和 縮放手勢由瀏覽器專門處理。該屬性用於取消瀏覽器默認手勢行為,開發人員自定義滾動和手勢行為。
touch-action的值:
auto : 當觸控事件發送在元素上時,由瀏覽器來決定進行那些操作,比如viewport進行平滑 縮放。
none : 當觸控事件發生在元素上時,不進行任何操作
pan-x : 啟用單指水平平移手勢
pan-y : 啟用單指垂直平移手勢。
manipulation : 只可以進行滾動和持續縮放操作。如雙擊縮放等別的手勢
pinch-zoom : 啟用多手指平移和縮放頁面,這可以和任何平移值組合 如 touch-action:pan-x pan-y pinch-zoom;
最常見的用法時禁用元素(及其不可滾動的后代)上的所有手勢,以使用自己提供的拖放和縮放的行為
touch-action:none;
還有一個用法是使用指針事件處理水平平移的圖片輪播,但不想干擾頁面的垂直滾動或縮放
touch-action:pan-y pinch-zoom;
解決雙擊縮放手勢引起的點擊事件延遲
touch-action:manipulation;