阻止移动端 touchmove 与 scroll 事件冲突

在移动端开发过程中,如果要实现一个元素或按钮的拖动定位,会出现很多坑。例如:元素上下移动过程中,会触发 bodyscroll 事件,导致整体的位置偏移,这时就需要 阻止移动端 touchmove 与 scroll 事件冲突

DOM Touchmove Scroll

一、解决思路

  1. 当移动端 touchmove 与 scroll 事件冲突时,首先想到的就是在 touchmove 事件监听过程中阻止默认事件(e.preventDefault())。
  2. 如果你这样做了,紧接着你就会看到控制台的报错:[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
  3. 然后通过 MDN ,得知 addEventListener 方法的第三个参数 options 有很多可选配置。
  4. options 是一个指定有关 listener 属性的可选参数对象。可用的选项如下:
参数 定义
capture 一个布尔值,表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
once 一个布尔值,表示 listener 在添加之后最多只调用一次。如果为 truelistener 会在其被调用之后自动移除。
passive 一个布尔值,设置为 true 时,表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数,客户端将会忽略它并抛出一个控制台警告。查看 使用 passive 改善滚屏性能以了解更多
signal AbortSignal,该 AbortSignalabort() 方法被调用时,监听器会被移除。

二、问题所在

因为将 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()
}

参考文档:


欢迎访问:天问博客

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 一般我们在监听scroll事件的时候想到的优化都是节流:即一段时间内只执行一次响应逻辑;但是有时候这种优化手...
    0月阅读 1,643评论 0 1
  • 这篇笔记主要简述下 DOM 事件流 - DOM Event Flow. 用于理解事件捕获与冒泡. 什么是事件 事件...
    逗比喵喵阅读 4,030评论 2 3
  • 一、 基础事件 1.click事件 单击事件,类似于PC端的click,但在移动端中,连续click的触发有200...
    致自己_cb38阅读 541评论 0 0
  • 很久没有写博客了,主要是最近换了个地打工,开始对一些反自动化的工作开始进行研究;这是一篇学习笔记,欢迎交流~ 背景...
    SummmmmerNeru阅读 613评论 0 0
  • 最近项目告一段落,总结一下值得记录的问题 1. 上传到阿里云的图片,返回的地址在pc端展示正常。小程序上无法展示 ...
    云鹤道人张业斌阅读 3,537评论 0 1