在基于 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. 本地数据备份与FTP远程数据迁移

    数据是电脑中最重要的东西.为了保证数据安全,我们经常会对数据进行备份.之前一直采用将重要数据拷贝至移动硬盘的方式实现备份,实现简单但每次都需要把所有文件拷贝一次,当文件很大时效率较低. 因此,考虑使用 ...

  2. Hive SQL之表与建表

    数据类型:  建表 create database itheima; --1.创建一张表 -- 表名 --字段 名称 类型 顺序 --字段之间的分隔符 create table itheima.t_a ...

  3. Transformer在量化投资的应用

    导语 RNN.LSTM和GRU网络已在序列模型.语言模型.机器翻译等应用中取得不错的效果.循环结构(recurrent)的语言模型和编码器-解码器体系结构取得了不错的进展. 但是,RNN固有的顺序属性 ...

  4. 反向 Debug 了解一下？揭秘 Java DEBUG 的基本原理

    Debug 的时候,都遇到过手速太快,直接跳过了自己想调试的方法.代码的时候吧-- 一旦跳过,可能就得重新执行一遍,准备数据.重新启动可能几分钟就过去了. 好在IDE 们都很强大,还给你后悔的机会,可 ...

  5. Tomcat自动化脚本

    /bin/bash war包名称 war_name="tchg.war" 要上传war包指定目录 war_dir="/usr/local/src/tchg" 工 ...

  6. 真的最后一次了——城院GO导航大作业迭代最终版

    真的!!!最后一次了!不骗人! 1.小程序的体验版二维码: 想体验的可以申请一下体验权限: 2.小程序目前功能介绍 1.首先进入是index页面:点击第一个是学校简介页面,第二个能直接跳到主程序的地图 ...

  7. Python——CSS（层叠样式表，Cascading Style Sheets）、选择器（Selectors）

    CSS(层叠样式表,Cascading Style Sheets)是一种用于描述文档样式和布局的样式表语言.它可以与HTML结合使用,用于控制网页的外观和格式.以下是CSS的主要特点和一些基本概念: ...

  8. Python——第一章：占位——pass

    pass: 常用于代码占位 a = 10 if a > 100: pass 当设计代码时,有些条件或代码还没有想好要如何处理,先用pass做占位,后续可以回来继续写.如果不写pass则会报错,因 ...

  9. 秒懂ajax轮询、long poll 、websocket

    ajax轮询 场景再现: 客户端:啦啦啦,有没有新信息(Request) 服务端:没有(Response) 客户端:啦啦啦,有没有新信息(Request) 服务端:没有..(Response) 客户端 ...

  10. JavaFx之TableView表格添加按钮删除行（二十二）

    JavaFx之TableView表格添加按钮删除行(二十二) JavaFx之TableView添加按钮 JavaFx之TableView删除行 编写一个xml <?xml version=&qu ...