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

在移动端开辟过程中，假如要实现一个元素或按钮的拖动定位，会出现很多坑。比方：元素上下移动过程中，会触发 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，而不是依靠欣赏器的默认设置。

• 关键代码：