解决移动端touchmove与scroll冲突：passive选项详解

正文

在移动端开发中，若需实现元素的拖动定位功能，常会遇到诸多兼容性问题。例如，在元素上下移动时，可能会意外触发 body 的 scroll 事件，造成整体布局偏移。为解决这一问题，必须有效处理移动端 touchmove 与 scroll 事件的冲突。

DOM Touchmove Scroll

一、解决思路

• 面对 touchmove 与 scroll 事件的冲突，常规思路是在 touchmove 事件监听器中调用 e.preventDefault() 以阻止默认行为。
• 然而，若直接采用上述方法，控制台通常会抛出如下警告：[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
• 查阅 MDN 文档可知，addEventListener 方法的第三个参数 options 支持多种配置选项。
• 是一个可选对象，用于指定有关 listener 的属性。其可用选项包括：

二、问题所在

将 passive 设置为 true 可启用性能优化，显著提升应用滚动性能。因此，除 Safari 和 Internet Explorer 外，大多数现代浏览器已将 Window、Document 及 Document.body 上 wheel、mousewheel、touchstart 和 touchmove 事件的 passive 默认值设为 true。在此默认设置下，事件监听器无法取消事件，也不会阻止页面滚动。

因此，当你想要覆盖这一行为并确认 passive 在所有浏览器中都被设为 false，你必须显式地将其设为 false，而不是依赖浏览器的默认设置。

• 关键代码：

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

参考文档：

• https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

以上即为解决移动端 touchmove 与 scroll 事件冲突的具体方法，更多相关技术细节可关注本站其他文章。