快捷導(dǎo)航

阻止移動(dòng)端touchmove與scroll事件沖突技巧

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

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

正文

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

DOM Touchmove Scroll

一、解決思路

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

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

二、問題所在

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

參考文檔：