写项目的时候，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'

参考了 https://www.jianshu.com/p/23850d4cade8

vue中，解决chrome下，的warning, Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event 问题的更多相关文章

  1. vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上

    一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说, ...

  2. vue中解决时间在ios上显示NAN的问题

    最近在用vue,遇到倒计时在ios上显示为NAN的问题. 因为做的是倒计时支付,思路是获取服务器时间和下单时间,再转成秒级时间戳做差值. 在网上找到说是ios 不支持例如2018-09-01 10:0 ...

  3. vue中解决拖动和点击事件的冲突

    BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse事件的执行顺序为onmousedown =>onmouseup => ...

  4. vue中解决跨域问题

    方法1.后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Metho ...

  5. Vue中解决路由切换，页面不更新的实用方法

    前言:vue-router的切换不同于传统的页面的切换.路由之间的切换,其实就是组件之间的切换,不是真正的页面切换.这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页 ...

  6. 解决chrome下上传文件 返回值带 <pre style="word-wrap:break-word;white-space:prewrap;"></pre>

    解决办法:后台 response.setContentType("text/html");

  7. 解决Chrome下表单自动填充后背景色为黄色

    Chrome浏览器在表单自动填充后会显示黄色背景,这是Chrome的私有属性导致,对于有洁癖的人来讲,是不喜欢的,我们可以手动去掉. 代码如下: input:-webkit-autofill { -w ...

  8. vue中解决three.js出现内存泄漏丢失上下文问题

    在跳转页面时添加以上代码即可. 在spa项目中,跳转页面并不会清楚已经创建的webgl实例,需要手动清楚.

  9. Vue中解决新脚手架3创建项目的移动端双击屏幕放大，双手拉动放大的方法

    替换新版vue-cli创建项目的public>index.html <!DOCTYPE html> <html lang="en"> <head ...

  10. chrome 下修改 agent 的方法

    前言 这篇文章和 tiankonguse 的个人网站里的文章保持同步. 很早之前,在 chrome 下修改 agent 的方法是使用 chrome 插件. 后来 chrome 的某一个版本中自带这个功 ...

随机推荐

  1. 跨域出现：XMLHttpRequest cannot load错误

    1.右击浏览器图标-->属性-->快捷方式-->目标栏添加--> --args --disable-web-security --user-data-dir 2.修改之后重新打 ...

  2. php ajax跨域问题解决方案

    本文通过设置Access-Control-Allow-Origin来实现跨域. 例如:客户端的域名是client.runoob.com,而请求的域名是server.runoob.com. 如果直接使用 ...

  3. 组建LAN

    推荐 cisco packet tracer 软件,可以画拓扑图,组件局域网等. ---------------------------------- 物联网:世界上很多物体的连接.物联网与现有的互联 ...

  4. java后台接收参数为枚举，postman的json如何传入

    使用postman测试接口,其中一个参数为枚举类型,如何传入参数? 1 枚举类型: public enum UserCourseOrderSourceType{ USER_BUY(1,"用户 ...

  5. python安装及简单爬虫（爬取导师信息）

    1.下载: 解释器(我下的是3.8.2版本):https://www.python.org/downloads/ pycharm(我下的是2019.3.3版本):https://www.jetbrai ...

  6. JAVA笔记_方法递归调用

    方法递归调用   简单地说递归调用就是方法自己调用自己,每次调用时传入不同的变量,递归有助于编程者解决复杂问题,同时可以让代码变得更加简洁. 递归调用执行机制案例1: /** * @ClassName ...

  7. uni-app配置钉钉小程序步骤

    1.创建项目 2.在项目根目录配置或者新建package.json文件,配置代码 { "uni-app": { "scripts": { "mp-di ...

  8. dockerfile 打包镜像

    打包镜像指令 docke人 build -t xxx -f dockerfile2 . xxx 镜像名称 -f 指定dockerfile2 文件 (多个文件的话) . 当前的上下文空间 dockerf ...

  9. 掌控安全学院SQL注入靶场宽字节注入

    在php中,magic_quotes_gpc这个函数为on时,就开启了转义功能,另外addslashes和mysql_real_escape_string也可以实现转义功能.可转移的的内容包括:单双引 ...

  10. 嵌入式Linux应用开发

    3-4 Makefile常用的函数 i.  $(foreach var,list,text) 简单地说,就是 for each var in list, change it to text. 对lis ...