vue2/3 - Unable to preventDefault inside passive event listener due to target being treated as passi

已于 2024-07-29 14:11:18 修改
阅读量2.4k 收藏 12
点赞数 10
分类专栏： 前端常见问题解决 前端组件与功能(开箱即用) 文章标签： vue2 vue3 控制台报错解决方法 Unable to preve inside passive event listener target being tr
于 2023-12-26 19:46:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/135229416
版权
本文介绍了在Vue2和Vue3项目中遇到的控制台报错'Unable to preventDefault inside passive event listener due to target being treated as passive'的问题及其解决方案。通过在CSS中添加特定代码并重启项目，可以成功解决此类警告。
摘要由CSDN通过智能技术生成

问题说明

在vue2/3项目中，控制台出现下图报错信息

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

在这里插入图片描述

解决办法

只需要

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 10
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
vue2/3 - 报错npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree（执行install装依赖报错
高级前端工程师
03-18 3071
vue2，vue3，npm install，装依赖，安装依赖，项目安装依赖，vue安装依赖时出现报错npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree，报错怎么解决，无法安装依赖怎么办，vue安装依赖失败，如何解决vue项目装依赖报错，npm ERR! While resolving:xxx，npm ERR! Found:xxx，npm ERR， code ERESOLVEnpm ERR， ERESOLVE u
vue项目出现错误： Unable to preventDefault inside passive event listener due to target being treated as
bailizx
07-02 8369
目录 1 错误 2 原因 3 解决方法 1 错误 谷歌浏览器报vue项目的错[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. 一个组件代码如下，发生图中错误 <template> <div class = "footerGuideStyle"> <a href="java
vue做mui项目中报错：[Intervention] Unable to preventDefault inside passive event listener due to target bei
zhilige的博客
04-26 1934
首先说明一下：因为新版谷歌浏览器的问题，所以报错。 历史：当浏览器首先对默认的事件进行响应的时候，要检查一下是否进行了默认事件的取消。这样就在响应滑动操作之前有那么一丝丝的耽误时间。 现在：google就决定默认取消了对这个事件的检查，默认时间就取消了。直接执行滑动操作。这样就更加的顺滑了。 解决方法全局样式中加一个 解决方法 添加下面的样式即可 * { touch-action: none; }...
Vue滚动/拖拽事件监听报错Unable to preventDefault inside passive event listener due to targetbeing treated as
2201_75568521的博客
01-31 541
用于设置触摸屏用户如何操纵元素的区域 (例如，浏览器内置的缩放功能)。有很多属性下面贴了不通值感兴趣的可以了解一下。2.在css 里面加， 使用全局样式样式去掉。CSS 属性 touch-action。1. 第三个值不传参。
vue 出现[Intervention] Unable to preventDefault inside passive event listener due to target being 报错
zjh980622的博客
07-05 386
在vue中 写了一个可以滚动的弹窗，但是点击弹窗滑动的时候会出现42[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>报错。出现这个问题的原因是，浏览器将事件处理程序标记为被动(passive)，以优化性能。搜了一下说这个错误通常是当你在passive事件监听器中尝试调用。在你报错的页面写上这段代码就好了。
Unable to preventDefault inside passive event listener due to target being treated as passive.
weixin_42390878的博客
07-31 1225
在css中加入一句： touch-action:pan-y; 很有用的2个文章： https://segmentfault.com/a/1190000008512184 https://segmentfault.com/a/1190000007621605
Added non-passive event listener to ascroll- blocking ‘mousewheel‘event Consider marking event handl
qq_42264793的博客
11-20 1万+
[Violation ] Added non-passive event listener to ascroll- blocking 'mousewheel’event Consider marking event handler as ’ passive’to make the page more responsive. See https: com/feature/574554 3795965952 翻译： [冲突]在ascroll中添加了非被动事件侦听器-阻塞“mousewheel”事件考虑将事件处理
Vue2/3 - 解决报错：This may cause things to work incorrectly. Make sure to use the same version for both.
高级前端工程师
12-26 4088
vue，vue安装依赖报错，vue运行时报错，run server，run dev时报错，vue如何解决This may cause things to work incorrectly. Make sure to use the same version for both.If you are using vue-loader@>=XXX, simply update vue-template-compiler.If you are using vue-loadergkXX or vueify, re-i
vue element chrome 警告信息non-passive event listener解决
qq_36350600的博客
09-16 2926
vue element chrome 警告信息non-passive event listener解决前言解决方法方法一(安装default-passive-events)方法二(修改element-plus源代码)参考链接 前言 用element-plus搞项目的时候一直报下面这个警告, 主要是在用<el-table></el-table>的地方 想要知道关于警告详情的,可以参考博文下发的参考链接,我就不多赘述了 [Violation] Added non-passive eve
Unable to preventDefault inside passive event listener due to target being treated
weixin_43837268的博客
01-06 147
Unable to preventDefault inside passive event listener due to target being treated 最简单的是加上*{ touch-action: none; } 不进行任何touch相关默认行为.
Unable to preventDefault inside passive event listener due to target being treated as passive
qq_49420571的博客
06-11 9656
"Unable to preventDefault inside passive event listener due to target being treated as passive." 这个错误通常是由于尝试阻止已被声明为被动的事件的默认行为所引起的。要解决这个问题，可以尝试以下方法： elem.addEventListener('touchstart', function(e) { e.preventDefault(); }, { passive: false }); 使用 { pas
Unable to preventDefault inside passive event listener due to target being treated as passive. See h...
weixin_30525825的博客
08-10 81
解决办法： 两个方案：1、注册处理函数时，用如下方式，明确声明为不是被动的window.addEventListener('touchmove', func, { passive: false }) 2、应用 CSS 属性touch-action: none;这样任何触摸事件都不会产生默认行为，但是 touch 事件照样触发。touch-action 还有很多选项，详细请参考to...
解决警告：Unable to preventDefault inside passive event listener due to target being treated as passive.
lizhihua0625的博客
03-09 7597
Unable to preventDefault inside passive event listener due to target being treated as passive.
Unable to preventDefault inside passive event listener due to target being treated as passive 怎么办？
热门推荐
景山编程-顺道编程
03-08 18万+
翻译一下：chrome 监听touch类事件报错：无法被动侦听事件preventDefault，是新版本chrome 浏览器报错。 说明：说一下这个 preventDefault()是个什么鬼，这个是取消默认事件的，如果这个函数起作用的，比如默认的表单提交，a链接的点击跳转，就不好用了。 原因：google浏览器为了最快速的相应touch事件，做出的改变。 历史：当浏览器首先对默认的事件进行响应的...
vue中[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive
最新发布
06-02
这是一个浏览器的警告信息，vue中通常会在使用滚动事件时出现。这个警告是由于Chrome优化浏览器性能的行为引起的。简单地说，当我们在某个元素上绑定了滚动事件时，Chrome会默认将该事件处理为“被动”事件，以提高浏览器的滚动性能。在这种情况下，我们无法通过调用preventDefault()方法来阻止默认行为，因为该事件已经被处理为“被动”事件。 为了解决这个问题，我们可以通过将passive选项设置为false来告诉浏览器，我们希望该事件可以被阻止默认行为。例如，在vue中可以这样写： ``` // 在mounted()生命周期中添加scroll事件监听 mounted () { window.addEventListener('scroll', this.handleScroll, { passive: false }) }, methods: { handleScroll (event) { event.preventDefault() // 可以阻止默认行为 // 其他逻辑处理 } } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值