快捷導(dǎo)航

阻止移動端touchmove與scroll事件沖突技巧

更新時間：2023年06月14日 09:47:29 作者：天問

這篇文章主要為大家介紹了阻止移動端touchmove與scroll事件沖突技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

在移動端開發(fā)過程中，如果要實現(xiàn)一個元素或按鈕的拖動定位，會出現(xiàn)很多坑。例如：元素上下移動過程中，會觸發(fā) body 的 scroll 事件，導(dǎo)致整體的位置偏移，這時就需要 阻止移動端 touchmove 與 scroll 事件沖突 。

DOM Touchmove Scroll

一、解決思路

當(dāng)移動端 touchmove 與 scroll 事件沖突時，首先想到的就是在 touchmove 事件監(jiān)聽過程中阻止默認(rèn)事件(e.preventDefault())。
如果你這樣做了，緊接著你就會看到控制臺的報錯：[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
然后通過 MDN ，得知 addEventListener 方法的第三個參數(shù) options 有很多可選配置。
options 是一個指定有關(guān) listener 屬性的可選參數(shù)對象?？捎玫倪x項如下：

參數(shù)	定義
capture	一個布爾值，表示 `listener` 會在該類型的事件捕獲階段傳播到該 `EventTarget` 時觸發(fā)。
once	一個布爾值，表示 `listener` 在添加之后最多只調(diào)用一次。如果為 `true`，`listener` 會在其被調(diào)用之后自動移除。
passive	一個布爾值，設(shè)置為 `true` 時，表示 `listener` 永遠(yuǎn)不會調(diào)用 `preventDefault()`。如果 `listener` 仍然調(diào)用了這個函數(shù)，客戶端將會忽略它并拋出一個控制臺警告。查看使用 passive 改善滾屏性能以了解更多。
signal	AbortSignal，該 `AbortSignal` 的 `abort()` 方法被調(diào)用時，監(jiān)聽器會被移除。

二、問題所在

因為將 passive 設(shè)為 true 可以啟用性能優(yōu)化，并可大幅改善應(yīng)用性能，所以大部分瀏覽器（Safari 和 Internet Explorer 除外）將文檔級節(jié)點(diǎn) Window、Document 和 Document.body 上的 wheel、mousewheel、touchstart 和 touchmove 事件的 passive 默認(rèn)值更改為 true 。如此，事件監(jiān)聽器便不能取消事件，也不會在用戶滾動頁面時阻止頁面呈現(xiàn)。

因此，當(dāng)你想要覆蓋這一行為并確認(rèn) passive 在所有瀏覽器中都被設(shè)為 false，你必須顯式地將其設(shè)為 false，而不是依賴瀏覽器的默認(rèn)設(shè)置。

關(guān)鍵代碼：

document.addEventListener('touchmove', touchmove, {
  passive: false,
})
function touchmove(e) {
  e = e || window.event
  // do something
  e.preventDefault()
}

參考文檔：