阻止移动端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冲突的资料请关注脚本之家其它相关文章！
相关文章
本篇文章主要是对js中浮点型运算的问题进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要介绍了H5实现仿flash效果的实现代码的相关资料,希望通过本文能帮助到大家，实现这样的功能，需要的朋友可以参考下2017-09-09
这篇文章主要为大家详细介绍了js实现车辆管理系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
大家在日常生活中都有网购的经验，有的网站会有商品放大镜功能，效果非常棒，那么基于js代码是如何实现的呢？下面小编给大家带来了基于js实现购物网站商品放大镜效果，非常不错，感兴趣的朋友参考下吧2016-09-09
在我们日常工作的时候，利用javaScript判断一个字符串中是否包括有数字和"-"，在一些表单提交的地方，这是比较有用的常规判断，这里收集有几种不同的方法，最后还将简要介绍下isNAN函数的使用方法和例子，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-11-11
做web开发几年，也认为自己的js写了不少，可真正去解释这个东西的时候，才发现不是这么简单，花了一些时间，写了几个小demo，让我们来一探究竟。2011-04-04
这篇文章主要为大家详细介绍了javascript实现雪花飘落效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
最近开发项目时,常碰到“用户在一定时间内无任何操作时,跳转到某个页面”的需求,所以本文就来使用JavaScript实现这一要求,需要的可以参考下2024-03-03
这篇文章主要介绍了微信小程序--特定区域滚动到顶部时固定的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了JavaScript函数绑定用法,结合实例形式分析了javascript函数绑定的原理、实现方法与相关操作技巧,需要的朋友可以参考下2017-11-11
最新评论