解决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() 函数具体实现什么功能?注释掉对具体功能有没有影响呢?

preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交)。例如:可以利用event.preventDefault()阻止a标签跳转。

由于浏览器无法预先知道一个事件处理函数中会不会调用 preventDefault(),它需要等到事件处理函数执行完后,才能去执行默认行为,然而事件处理函数执行是要耗时的,这样一来就会导致页面卡顿,也就是说,当浏览器等待执行事件的默认行为时,大部分情况是白等了。

如果 Web 开发者能够提前告诉浏览器:“我不调用 preventDefault 函数来阻止事件事件行为”,那么浏览器就能快速生成事件,从而提升页面性能,Passive event listeners 的提出就解决了这样的问题。

在我的项目中,通过注释掉preventDefault()成功解决了控制台报错的问题,暂时未发现影响其他功能。

原文地址:https://www.cnblogs.com/bossing/p/12191176.html

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

解决mui错误:Unable to preventDefault inside passive event listener due to target being treated as passive.的相关文章

[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 的解决方法

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

[问题解决]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.注册处理函数时,用如下方式,明确声明为不

报错: 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.

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 },