| js 禁止移动端H5页面默认下拉（左右滑动引起的物理返回也可同时禁止） | 您所在的位置：网站首页 › h5页面的左右滑动事件 › js 禁止移动端H5页面默认下拉（左右滑动引起的物理返回也可同时禁止） |
|
1.问题
移动端页面滚动不仅滚动了希望滚动的部分，整体的页面也跟者上下滚动，整个页面非常卡顿。
控制台打印如下警告：
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
2. 解决方法
阻止touchmove默认事件，页面不再滚动
在touch的事件监听方法上绑定第三个参数{ passive: false }
通过传递 passive 为 false 来明确告诉浏览器：事件处理程序调用 e.preventDefault() 来阻止默认滑动行为。
document.body.addEventListener('touchmove', function (e) { e.preventDefault() }, { passive: false })
在需要的时候可以选择恢复touchmove默认事件，继续滚动页面
removeEventListener() 方法用于移除由addEventListener()方法添加的事件句柄。
document.body.removeEventLister("touchmove")
3.addEventListener()方法
target.addEventListener(type, listener, options);
target.addEventListener(type, listener, {
capture: false, //捕获
passive: false,
once: false //只触发一次
})
options 对象可用的三个属性都是布尔类型的开关。其中 capture 属性等价于以前的 useCapture 参数；once 属性就是表明该监听器是一次性的，执行一次后就被自动 removeEventListener 掉。 4.passive的作用passive主要用于优化浏览器页面滚动的性能，让页面滚动更顺滑 浏览器的默认行为，它可以被e.preventDefault()阻止 浏览器touchmove事件的默认行为是什么呢，通常来说就是滚动当前页面（还可能是缩放页面），如果它的默认行为被阻止了，页面就必须静止不动。 但浏览器无法预先知道一个监听器会不会调用 e.preventDefault()，它能做的只有等监听器执行完后再去执行默认行为，而监听器执行是要耗时的，有些甚至耗时很明显，这样就会导致页面卡顿。 有 80% 的滚动事件监听器是不会阻止默认行为的，也就是说大部分情况下，浏览器是白等了。所以，passive 监听器诞生了，passive 的意思是“顺从的”，表示浏览器顺从事件的默认行为，浏览器知道了一个监听器是 passive 的，浏览器就可以在两个线程里同时执行监听器中的 JavaScript 代码和浏览器的默认行为了。 我们可以通过传递 passive 为 true 来明确告诉浏览器顺从事件的默认行为,（事件处理程序不会调用 e.preventDefault() 来阻止默认滑动行为)，浏览器就不会等待事件处理函数执行完成再执行滚动，即使滚动事件里面写一个死循环，浏览器也能够正常处理页面的滑动 passive 为 false 会告诉浏览器阻止事件的默认行为，事件处理程序会调用e.preventDefault()阻止页面默认滑动行为 |
| CopyRight 2018-2019 实验室设备网 版权所有 |