在基于 Element-ui 写项目的时候，Chrome 提醒：

[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.

翻译过来如下：

违反：没有添加被动事件监听器来阻止'touchstart'事件，请考虑添加事件管理者'passive'，以使页面更加流畅。

原因是 Chrome51 版本以后，Chrome 增加了新的事件捕获机制－Passive Event Listeners；

Passive Event Listeners：就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动（passive）监听器。目前Chrome主要利用该特性来优化页面的滑动性能，所以Passive Event Listeners特性当前仅支持mousewheel/touch相关事件。

解决：

1、npm i default-passive-events -S

2、main.js中加入：import 'default-passive-events'

[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event.的更多相关文章

  1. Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive

     Vue控制台警告:  Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider markin ...

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

    相信如果用谷歌浏览器做移动端页面的时候 用touch事件的时候应该遇到过这个东东吧 documet.addEventListener("touchstart",function() ...

  3. vue中，解决chrome下，的warning, Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event 问题

    写项目的时候,Chrome 提醒: [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' eve ...

  4. 设置点击事件时Unable to preventDefault inside passive event listener due to target being treated as passive

    问题 当使用fastClick.js设置点击事件时,控制台报错: [Intervention] Unable to preventDefault inside passive event listen ...

  5. 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 今天在做项目 ...

  6. Unable to preventDefault inside passive event listener

    最近做项目经常在 chrome 的控制台看到如下提示: Unable to preventDefault inside passive event listener due to target bei ...

  7. 滑动时候警告：Unable to preventDefault inside passive event listener

    1 前言 在制作2048时,需要在手机端添加滑动检测事件,然后发现控制台有警告,如下: main2048.js:218 [Intervention] Unable to preventDefault ...

  8. 移动端页面滑动时候警告：Unable to preventDefault inside passive event listener due to target being treated as passive.

    移动端项目中,在滚动的时候,会报出以下提示: [Intervention] Unable to preventDefault inside passive event listener due to ...

  9. [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 tr ...

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

    最近两天企业微信下IScroll突然无法滚动了,特别慢,之前好好的,发现主要是有红色的Unable to preventDefault inside passive event listener du ...

随机推荐

  1. The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission，iphone手机video标签报错

    The request is not allowed by the user agent or the platform in the current context, possibly becaus ...

  2. RocketMQ一直打印RocketmqRemoting closeChannel: close the connection to remote address[] result: true

    交代一下背景: RocketMQ服务端搭建在ECS上面(问题就出在这里) SpringBoot应用根据官网Demo(参考:https://github.com/apache/rocketmq-spri ...

  3. 文心一言 VS 讯飞星火 VS chatgpt （153）-- 算法导论12.2 9题

    九.用go语言,设 T 是一棵二叉搜索树,其关键字互不相同;设 x 是一个叶结点,y 为其父结点.证明: y.key 或者是 T 树中大于 x.key 的最小关键字,或者是 T 树中小于 x.key ...

  4. 使用 PyTorch FSDP 微调 Llama 2 70B

    引言 通过本文,你将了解如何使用 PyTorch FSDP 及相关最佳实践微调 Llama 2 70B.在此过程中,我们主要会用到 Hugging Face Transformers.Accelera ...

  5. 如何使用sharding-sphere完成读写分离和分库分表?

    一.sharding-sphere配置读写分离 1.先搭建好一个MySQL的主从集群,可以参考[MySQL主从集群搭建] 2.在项目中导入相关依赖(记得刷新Maven) <!--读写分离--&g ...

  6. 量化交易的相对强弱（RSI ）指标计算及策略

    顾名思义,相对强弱指数 (RSI) 指标告诉我们资产的相对强弱.换句话说,RSI 告诉我们股票相对于自身的表现(或不表现).RSI 被视为一种强大的技术指标,可用于分析市场,并且是交易者武器库的重要组 ...

  7. 创建一个双模式跨运行时的 JavaScript 包

    本文将指导你发布双模式.跨运行时的 JavaScript 包.了解如何创建与 ESM 和 CommonJS 以及 Node.js.Deno 和浏览器等不同运行时兼容的库. 随着 JavaScript ...

  8. 【源码系列#05】Vue3响应式原理（Ref）

    Ref & ShallowRef ref:接受一个参数值并返回一个响应式且可改变的 ref 对象.ref 对象拥有一个指向内部值的单一属性 .value 可以将 ref 看成 reactive ...

  9. JavaFx 打开一个新窗口和窗口交互（四）

    JavaFx 打开一个新窗口和窗口交互(四) JavaFX 从入门入门到入土系列 前面我演示的demo都是单个窗口,那么如何实现多个窗口呢?使用Stage secondStage = new Stag ...

  10. linux中nginx下载安装部署

    反向代理 动静结合 负载均衡 下载 wget https://nginx.org/download/nginx-1.24.0.tar.gz 官网下载稳定版 解压 tar -zxvf nginx-1.2 ...