滑动的时候报警告：Unable to preventDefault inside

最新推荐文章于 2024-03-06 01:39:33 发布
最新推荐文章于 2024-03-06 01:39:33 发布
阅读量1.9k 收藏
点赞数
分类专栏： HTML 文章标签： html chrome滑动警告
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lu900618/article/details/78572222
版权

滑动的时候报警告：Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

解决方法，可以加上 * { touch-action: pan-y; } 这句样式去掉。

原因：（是chrome为了提高页面的滑动流畅度而新折腾出来的一个东西）     
http://www.cnblogs.com/pearl07/p/6589114.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action
lu900618
关注
专栏目录
大图片所引起的内存问题
10-29
在Android开发中，内存管理是至关重要的，尤其是处理大图片时，可能会引发内存溢出（Out Of Memory，简称OOM）问题。这是因为Android设备为每个应用分配的内存是有限的，而大图片会占用大量内存，当应用试图加载过多...
Unable to preventDefault inside passive event listener due to target being treated as passive
热门推荐
qq_49420571的博客
06-11 1万+
"Unable to preventDefault inside passive event listener due to target being treated as passive." 这个错误通常是由于尝试阻止已被声明为被动的事件的默认行为所引起的。要解决这个问题，可以尝试以下方法： elem.addEventListener('touchstart', function(e) { e.preventDefault(); }, { passive: false }); 使用 { pas
vue解决报错Unable to preventDefault inside passive event listener invocation.
m0_73481765的博客
10-18 6381
然而，在passive事件监听器中调用preventDefault()方法是无效的，并且会引发上述警告。而passive事件监听器是一种新的事件处理机制，它允许开发者在事件处理函数执行之前告诉浏览器不要等待事件处理函数执行完毕就可以继续执行默认的操作，这样可以提高页面的响应性能。然而，在某些情况下，忽视这个警告可能会导致意外的行为或性能问题，所以建议开发者根据具体情况选择合适的解决方案。使用事件委托：如果无法直接在Vue组件中解决该警告，可以尝试在父级元素上使用事件委托，并在事件处理函数中调用。
解决警告：Unable to preventDefault inside passive event listener due to target being treated as passive.
lizhihua0625的博客
03-09 7740
Unable to preventDefault inside passive event listener due to target being treated as passive.
解决Unable to preventDefault inside passive event listener invocation. 报错
m0_59006402的博客
05-08 1269
解决办法：将 main.js中引入的：import 'default-passive-events' 注释掉。这个报错大致说的是 阻止默认行为。
报错:runtime-dom.esm-bundler.js:647 [Violation] Added non-passive event listener to a scroll-blocking
最新发布
技术应让更广泛的人群流入到实际产品开发中才是正统
03-06 482
Chrome 为了优化滚动性能,引入了一个新的规范 - Passive Event Listeners。这个规范要求开发者标记事件监听器是否会调用。这个解决方案可以避免你手动逐个标记passive,同时解决了报错问题,并获得了滚动性能的提升。,那么浏览器就可以进行一些优化,比如提前触发绘制等,从而提高滚动性能。解决方案：安装插件default-passive-events。如果你没有标记,Chrome 就会假设你的监听器可能会调用。,从而无法进行优化。这就导致了你遇到的那个报错。
AjaxUI：滑动条
10-31
AjaxUI中的滑动条是一种常见的用户界面元素，用于在给定范围内进行连续或离散的选择。滑动条通常由两个部分组成：一个可移动的滑块和一个轨道，用户可以通过拖动滑块来选择值。在网页开发中，滑动条可以提供一种直观...
JQuery事件e参数的方法preventDefault()取消默认行为
10-26
为了确保跨浏览器的兼容性，建议总是检查浏览器对`e.preventDefault()`方法的支持情况，或者使用兼容性替代方案，比如`return false`语句，它同时阻止了事件的默认行为和事件的进一步传播（冒泡）。 下面详细介绍`e...
js实现移动端导航点击自动滑动效果
10-19
在移动端开发中，创建一个可滑动的导航栏是一个常见的需求。这个效果可以让用户通过点击导航按钮，使得页面内容随之平滑地左右滑动。在本文中，我们将深入探讨如何使用JavaScript，特别是iscroll.js库来实现这样一个...
zepto-touch:Zepto滑动插件
05-08
Zepto滑动插件 注意：已弃用，请改用 。 经过测试 Android 2.3.5（中兴Q101T） Android 4.0.3（Coolpad 8076D） Android 4.2.2（Sony S36h） Android 4.4.2（三星GT-N7100） iOS 8.0（iPad） Windows Phone ...
vue项目过程中遇到的问题
qq_34946429的博客
05-11 371
1.做页面的过程中，一个页面引用多个小组件时，组件必须用一个大的div包裹住，不然会出错。
前端滚动警告Unable to preventDefault inside passive event listener due to target being treated as passive.
一一
07-08 701
正常情况下，浏览器要在执行事件处理函数之后才知道是否调用preventDefault()阻止默认事件，这就导致了浏览器响应滑动有延迟。从chrome56开始，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为是 passive: true。 翻找发现是日历组件vue-hash-calendar中TimePicker组件存在e.preventDefault() 且项目中安装了依赖 default-passive-events 没找.
解决滚动警告：Unable to preventDefault inside passive event listener
weixin_34202952的博客
05-08 9322
起因 近期更新项目，使用fullpage.js实现单页滚动，页面报错： passive event listener 关于 passive event listener 的问题已遇到过多次。 当我们滚动页面的时候或者需要监听 touch 事件的时候，浏览器无法预先知道一个事件处理函数中会不会调用 preventDefault()，故而通过一个延迟，大约300ms的停顿来检测，整个页面就显得卡顿。...
mui底部选项卡 报错Unable to preventDefault inside passive event listener due to target being treated as pa
weixin_42606458的博客
08-22 3021
问题描述： 用MUI例子中的选项卡，底部的导航只能实现div切换，链接无法跳转。 查看控制台，输出：Unable to preventDefault inside passive event listener due to target 的警告。 问题解决： 经检查相关资料，加入以下代码，即可解决问题。 mui('body').on('tap','a',function(){docume...
滑动报Unable to preventDefault inside passive event listener的解决办法
sxs7970的博客
04-01 4000
在谷歌浏览器中，滑动会报一下错误： 解决方案： 在 style 样式中，添加： //scss * { touch-action: pan-x; }
移动端页面滑动警告[Intervention] Unable to preventDefault inside passive event listener
晓何的博客
04-24 3968
控制台报错 解决方法 在有滚动的容器css样式添加如下代码 touch-action: pan-y; //或者使用全局样式样式去掉 * { touch-action: pan-y; }
Unable to preventDefault inside passive event listener
weixin_34343689的博客
02-28 375
最近做项目经常在 chrome 的控制台看到如下提示： Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/50935...
滑动屏幕报错：解决[Intervention] Unable to preventDefault inside passive event listener 。。。
iChangebaobao的博客
07-10 8494
1.封装触屏工具touch.js var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) element.addEventListener(type, handler, false); else if...
EasyPlayer-lib.min.js:1 Unable to preventDefault inside passive event listener invocation.
05-24
这个错误信息通常与移动端的滑动操作有关，由于性能优化，现代浏览器默认会将一些事件处理程序设置为被动模式，以提高滚动性能。在被动模式下，无法使用preventDefault()方法来阻止默认行为，因为这可能会导致滚动卡顿。 要解决这个问题，你可以尝试使用addEventListener()方法来注册事件处理程序时，将第三个参数设置为{passive:false}，这会显式地告诉浏览器，事件处理程序需要阻止默认行为。例如： ``` element.addEventListener('touchstart', onTouchStart, {passive: false}); ``` 如果你使用的是第三方库或框架，可能需要查看其文档以了解如何处理passive事件监听器的问题。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值