[问题解决]Unable to preventDefault inside passive event listener due to target being treated as passive.

解释

由于浏览器必须要在执行事件处理函数之后,才能知道有没有掉用过 preventDefault() ,这就导致了浏览器不能及时响应滚动,略有延迟。

所以为了让页面滚动的效果如丝般顺滑,从 chrome56 开始,在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数,会默认为是 passive: true。

浏览器忽略 preventDefault() 就可以第一时间滚动了。

解决

方案1、注册处理函数时,用如下方式,明确声明为不是被动的

window.addEventListener('touchmove', func, { passive: false })

方案2、应用 CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为,但是 touch 事件照样触发。例 使用全局样式样式去掉默认行为

 * { touch-action: none; }   

补充:

touch-action也可取一下值
none:当触控事件发生在元素上时,不进行任何操作。因此使用none无法触摸
pan-x:启用单指水平平移手势。可以与 pan-y 、pan-up、pan-down 和/或 pinch-zoom 组合使用。
pan-y:启用单指垂直平移手势。可以与 pan-x 、pan-left 、pan-right 和/或 pinch-zoom 组合使用。

[注]未来可能所有的元素的 touchstart touchmove 事件处理函数都会默认为 passive: true

原文地址:https://www.cnblogs.com/L-xmin/p/12495065.html

时间: 2024-10-11 07:56:04

[问题解决]Unable to preventDefault inside passive event listener due to target being treated as passive.的相关文章

解决mui错误:Unable to preventDefault inside passive event listener due to target being treated as passive.

问题描述:点击返回按钮时,每次在控制台都出现如下错误: mui.min.js:13 Unable to preventDefault inside passive event listener due to target being treated as passive. 解决办法: 定位到mui.min.js的报错行,发现报错的代码是a.preventDefault(),遂在mui.min.js中将a.preventDefault()注释掉,问题解决. 问题分析: preventDefault

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

1.滑动时候警告[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. 2.解决方案 解决办法1: 在touch的事件监听方法上绑定第三个参数{ passive: false }, 通过传递 passive 为 false 来明确告诉浏览器:事件处理程序调用 preventDefault 来阻止默认滑动行为. elem.addEven

移动端报错: Unable to preventDefault inside passive event listener due to target being treated as passive的解决方案

在做react移动端项目的时候,连续点击底部导航,浏览器就会报Unable to preventDefault inside passive event listener due to target being treated as passive的错: 解决方案: 给html加上CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为,但是 touch 事件照样触发. html { font-size: 6.666667vw; overflow-x: hidde

滑动时报错[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>

移动端Web界面滚动性能优化 Passive event listeners 解决办法1: 在touch的事件监听方法上绑定第三个参数{ passive: false }, 通过传递 passive 为 false 来明确告诉浏览器:事件处理程序调用 preventDefault 来阻止默认滑动行为. elem.addEventListener( 'touchstart', fn, { passive: false } ); 解决办法2: * { touch-action: pan-y; } 使

报错: Unable to preventDefault inside passive event listener due to target being treated as passive

由于浏览器必须要在执行事件处理函数之后,才能知道有没有掉用过 preventDefault() ,这就导致了浏览器不能及时响应滚动,略有延迟. 所以为了让页面滚动的效果如丝般顺滑,从 chrome56 开始,在 window.document 和 body 上注册的 touchstart 和 touchmove 事件处理函数,会默认为是 passive: true.浏览器忽略 preventDefault() 就可以第一时间滚动了. 举例:wnidow.addEventListener('tou

Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

解决办法: 两个方案:1.注册处理函数时,用如下方式,明确声明为不是被动的window.addEventListener('touchmove', func, { passive: false }) 2.应用 CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为,但是 touch 事件照样触发.touch-action 还有很多选项,详细请参考touch-action 链接:https://segmentfault.com/a/1190000008512184

jquery.nicescroll.js Unable to preventDefault inside passive event listener due to target being treated as passive.

解决办法就是:https://github.com/bestjhh/Plugin 下载替换. 参考: https://github.com/bestjhh/Plugin https://blog.csdn.net/qq_40776187/article/details/90170419 https://www.chromestatus.com/features/6662647093133312 原文地址:https://www.cnblogs.com/sea-stream/p/11261450.

滑动报 Unable to preventDefault inside passive event listener due to target being treated as passive 的解决方法

google浏览器滑动出现以下问题: 解决办法如下:在html元素下添加样式 touch-action: none; html{ touch-action:none; } 原文地址:https://www.cnblogs.com/rachelch/p/11636997.html

mui执行滑动事件: Unable to preventDefault inside passive event listener

使用MUI框架,在上拉加载和下拉刷新的时候会出现下面的异常: [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080 解决办法: 方法1)在touch的事件监听方法上绑定第三个参数{ passive: false },