克制移动端 touchmove 与 scroll 变乱辩说

计算机软件开发 · 2024-9-22 06:33:19

在移动端开辟过程中，假如要实现一个元素或按钮的拖动定位，会出现很多坑。比方：元素上下移动过程中，会触发 body 的 scroll 变乱，导致团体的位置偏移，这时就必要 克制移动端 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 有很多可选设置。
options 是一个指定有关 listener 属性的可选参数对象。可用的选项如下：

参数界说capture一个布尔值，表现 listener 会在该范例的变乱捕捉阶段流传到该 EventTarget 时触发。once一个布尔值，表现 listener 在添加之后最多只调用一次。假如为 true，listener 会在其被调用之后主动移除。passive一个布尔值，设置为 true 时，表现 listener 永久不会调用 preventDefault()。假如 listener 仍旧调用了这个函数，客户端将会忽略它并抛出一个控制台告诫。检察利用 passive 改善滚屏性能以相识更多。signalAbortSignal，该 AbortSignal 的 abort() 方法被调用时，监听器会被移除。二、题目所在

由于将 passive 设为 true 可以启用性能优化，并可大幅改善应用性能，以是大部门欣赏器（Safari 和 Internet Explorer 除外）将文档级节点 Window、Document 和 Document.body 上的 wheel、mousewheel、touchstart 和 touchmove 变乱的 passive 默认值更改为 true 。云云，变乱监听器便不能取消变乱，也不会在用户滚动页面时克制页面出现。
因此，当你想要覆盖这一行为并确认 passive 在全部欣赏器中都被设为 false，你必须显式地将其设为 false，而不是依靠欣赏器的默认设置。

关键代码：

克制移动端 touchmove 与 scroll 变乱辩说

所属分类: 问答交流

新帖推荐: 30日

推荐作品