阻止移动端touchmove与scroll事件冲突技巧
更新时间：2023年06月14日 09:47:29 作者：天問
这篇文章主要为大家介绍了阻止移动端touchmove与scroll事件冲突技巧详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
正文
在移动端开发过程中，如果要实现一个元素或按钮的拖动定位，会出现很多坑。例如：元素上下移动过程中，会触发 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有很多可选配置。 - options 是一个指定有关
listener属性的可选参数对象。可用的选项如下：
| 参数 | 定义 |
|---|---|
| capture | 一个布尔值，表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。 |
| once | 一个布尔值，表示 listener 在添加之后最多只调用一次。如果为 true，listener 会在其被调用之后自动移除。 |
| passive | 一个布尔值，设置为 true 时，表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。查看 使用 passive 改善滚屏性能以了解更多。 |
| signal | AbortSignal，该 AbortSignal 的 abort() 方法被调用时，监听器会被移除。 |
二、问题所在
因为将 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()
}参考文档：
以上就是阻止移动端touchmove与scroll事件冲突技巧的详细内容，更多关于阻止touchmove与scroll冲突的资料请关注脚本之家其它相关文章！
相关文章
本文主要介绍了JavaScript本地存储实现用户名存储案例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
sessionStorage是指本地存储一个会话中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁,这篇文章主要给大家介绍了关于js前端存储之sessionStorage使用方法的相关资料,需要的朋友可以参考下2024-06-06
这篇文章主要为大家详细介绍了微信小程序自定义单项选择器样式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
JSON+JavaScript处理JSON的简单例子，需要的朋友可以参考一下2013-03-03
这篇文章主要为大家详细介绍了javascript实现弹幕墙效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
Javascript中字符串replace方法的第二个参数探究
当我们要把一段字符串中的某些指定字符替换掉，第一时间想到的就是replace方法，他的用法很简单，W3school上讲的清晰易懂。网上有关replace的文章也有很多了，那么这篇这里主要聊聊它的第二个参数，下面来一起看看，注意阅读本文需要对replace方法有一定了解。2016-12-12
2007/12/23更新创意无限,简单实用(javascript log)
在javascript开发过程中，如果总是使用alert的方式调试程序，在某些简单的程序中是可行的. 但是在通常的项目很复杂，这种方式已经很难满足，企业级开发的需要。2007-12-12
这篇文章主要介绍了使用javascript做在线算法编程的相关知识,需要的朋友可以参考下2018-05-05
本文是小编给大家分享的基于js实现的9种不同风格的面包屑和分布式多步骤导航效果，非常不错，具有参考借鉴价值，需要的朋友参考下2017-02-02
KnockoutJS 3.X API 第四章之数据控制流component绑定
这篇文章主要介绍了KnockoutJS 3.X API 第四章之数据控制流component绑定的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-10-10
最新评论