在基于 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. 离散傅里叶变换DFT的应用

    目录 一维DFT 1 DFT的相关内容 2 DFT计算结果验证 3 DFT的时频曲线分析 4 DFT的应用 二维DFT 1 DFT在图像处理时的相关内容 2 DFT滤波应用 一维DFT 1 DFT的相 ...

  2. springcloud 实体类使用@Builder@AllArgsConstructor两个注解后查询执行操作时报数据转换异常

    异常日志如下: org.springframework.jdbc.UncategorizedSQLException: Error attempting to get column 'DATA_SOU ...

  3. Tensorflow2.0：使用Keras自定义网络实战

    tensorflow2.0建议使用tf.keras作为构建神经网络的高级API 接下来我就使用tensorflow实现VGG16去训练数据 背景介绍: 2012年 AlexNet 在 ImageNet ...

  4. Java如何连接Mysql数据库

    条件:eclipse.MySQL .jdbc驱动 eclipse.MySQL 的安装.下载jdbc连接驱动 eclipse的安装去官网下载并安装 MySQL .jdbc的下载地址请访问:https:/ ...

  5. k8s安装网络插件calico出现error validating "calico.yaml": error validating data: invalid object to validate; if you choose to ignore these errors, turn validation off with --validate=false

    解决办法:使用下面版本的calico curl https://docs.projectcalico.org/v3.20/manifests/calico.yaml -O

  6. Linux卸载与安装JDK

    安装 一.yum安装JDK 1.查看可安装的Java版本 yum -y list java* 2.选择一个自己要安装的版本 我安装的是java-11-openjdk.x86_64 sudo yum i ...

  7. IIS通过ARR实现负载均衡

    一.实现整体方式介绍 项目中部署在windows服务器上的项目,需要部署负载均衡,本来想用nginx来配置的,奈何iis上有几个项目,把80端口和443端口占用了,nginx就用不了了(因为通过域名访 ...

  8. Baidu Comate实践指南，惊艳了我...

    1 啥是Baidu Comate Comate是百度开发的编程大模型工具,它基于文心大模型,结合百度积累多年的编程现场大数据和外部优秀开源数据,为我们生成更符合实际研发场景的优质代码:它能提升编码效率 ...

  9. 在ubuntu下将virtualbox虚拟机的磁盘重设大小的方法

    1.VBoxManage modifyhd /home/beyond/xxx.vdi --resize 20480 {20480(单位:M)是你要扩容之后的总大小,/home/beyond 是你存放 ...

  10. Caffeine Cache缓存

    SpringBoot 集成 Caffeine Caffeine 和 Spring Cache 依赖,使用注解方法实现缓存 依赖 <!--提供 Spring Boot 中的缓存支持--> & ...