在移動(dòng)端開(kāi)發(fā)過(guò)程中，如果要實(shí)現(xiàn)一個(gè)元素或按鈕的拖動(dòng)定位，會(huì)出現(xiàn)很多坑。例如：元素上下移動(dòng)過(guò)程中，會(huì)觸發(fā) body 的 scroll 事件，導(dǎo)致整體的位置偏移，這時(shí)就需要 阻止移動(dòng)端 touchmove 與 scroll 事件沖突 。
DOM Touchmove Scroll
一、解決思路
- 當(dāng)移動(dòng)端 touchmove 與 scroll 事件沖突時(shí)，首先想到的就是在 touchmove 事件監(jiān)聽(tīng)過(guò)程中阻止默認(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. - 然后通過(guò) MDN ，得知
addEventListener方法的第三個(gè)參數(shù)options有很多可選配置。 -
options 是一個(gè)指定有關(guān)
listener屬性的可選參數(shù)對(duì)象。可用的選項(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)聽(tīng)器會(huì)被移除。 |
二、問(wèn)題所在
因?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)聽(tīng)器便不能取消事件，也不會(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()
}
參考文檔：
歡迎訪問(wèn)：天問(wèn)博客
