今天在寫vue項目的時候碰到一個
Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>
這樣的bug 然后找了一通發(fā)現(xiàn)可以用 *{touch-action：none}這個方法
用法是禁用元素（及其不可滾動的后代）上的所有手勢，以使用自己提供的拖放和縮放行為（如地圖或游戲表面）。
由此找了其他的屬性值 發(fā)現(xiàn)還挺強(qiáng)大的
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;
/* Global values */
touch-action: inherit;
touch-action: initial;
touch-action: unset;
默認(rèn)情況下，平移（滾動）和縮放手勢由瀏覽器專門處理。 使用
Pointer_events的應(yīng)用程序?qū)⒃跒g覽器開始處理觸摸手勢時收到一個 pointercancel 事件。 通過明確指定瀏覽器應(yīng)該處理哪些手勢，應(yīng)用程序可以在 pointermove 和 pointerup 監(jiān)聽器中為其余的手勢提供自己的行為。 使用Touch_events的應(yīng)用程序通過調(diào)用preventDefault()禁用瀏覽器處理手勢，但也應(yīng)使用觸摸操作確保瀏覽器在調(diào)用任何事件偵聽器之前，了解應(yīng)用程序的意圖。
當(dāng)手勢開始時，瀏覽器與觸摸的元素及其所有祖先的觸摸動作值相交直到一個實現(xiàn)手勢（換句話說，第一個包含滾動元素）的觸摸動作值。 這意味著在實踐中，觸摸動作通常僅適用于具有某些自定義行為的單個元素，而無需在該元素的任何后代上明確指定觸摸動作。 手勢開始之后，觸摸動作值的更改將不會對當(dāng)前手勢的行為產(chǎn)生任何影響。
值
auto
當(dāng)觸控事件發(fā)生在元素上時，不進(jìn)行任何操作。
none
當(dāng)觸控事件發(fā)生在元素上時，不進(jìn)行任何操作
pan-x
啟用單指水平平移手勢?？梢耘c pan-y 、pan-up、pan-down 和／或 pinch-zoom 組合使用
pan-y
啟用單指垂直平移手勢?？梢耘c pan-x 、pan-left 、pan-right 和／或 pinch-zoom 組合使用。
manipulation
瀏覽器只允許進(jìn)行滾動和持續(xù)縮放操作。任何其它被auto值支持的行為不被支持。啟用平移和縮小縮放手勢，但禁用其他非標(biāo)準(zhǔn)手勢，例如雙擊以進(jìn)行縮放。 禁用雙擊可縮放功能可減少瀏覽器在用戶點擊屏幕時延遲生成點擊事件的需要。 這是“pan-x pan-y pinch-zoom”（為了兼容性本身仍然有效）的別名。
pan-left, pan-right,pan-up,pan-down
啟用以指定方向滾動開始的單指手勢。 一旦滾動開始，方向可能仍然相反。 請注意，滾動“向上”（pan-up）意味著用戶正在將其手指向下拖動到屏幕表面上，同樣 pan-left 表示用戶將其手指向右拖動。 多個方向可以組合，除非有更簡單的表示（例如，“pan-left pan-right”無效，因為“pan-x”更簡單，而“pan-left pan-down”有效）。
pinch-zoom
啟用多手指平移和縮放頁面。 這可以與任何平移值組合。
示例
最常見的用法是禁用元素（及其不可滾動的后代）上的所有手勢，以使用自己提供的拖放和縮放行為（如地圖或游戲表面）
#map {
touch-action: none;
}
另一種常見的模式是使用指針事件處理水平平移的圖像輪播，但不想干擾網(wǎng)頁的垂直滾動或縮放。
.image-carousel {
width: 100%;
height: 150px;
touch-action: pan-y pinch-zoom;
}
觸摸動作也經(jīng)常用于完全解決由支持雙擊縮放手勢引起的點擊事件的延遲。
html {
touch-action: manipulation;
}
