写项目的时候，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. ASP中把数据导出为Excel的三种方法

    方法一:用excel组件 这种方法利用Excel组件直接导出excel文件,要求服务器端安装有微软office(Excel)程序,否则无法运行. 完整示例如下: Set conn=server.Cre ...

  2. linux开机出现grub界面

    今天开机时候突然出现grub界面,并且卡在这里,记录一下解决办法 ①输入ls 2. 输入ls (hd0,6)/ 可以看到返回的就是linux系统的根目录,说明这个磁盘就是我们的系统的所在盘 如果ls ...

  3. iOS开发之UIImage在压缩时失真问题，压缩图片的大小

    今天遇到UIImage在压缩时失真问题,压缩图片的大小图片模糊 错误的方案 /** * 压缩图片 * image:将要压缩的图片 size:压缩后的尺寸 */ -(UIImage*) OriginIm ...

  4. ZooKeeper的主要应用场景

    什么是Zookeeper ZooKeeper主要服务于分布式系统,可以用ZooKeeper来做:统一配置管理.统一命名服务.分布式锁.集群管理. 使用分布式系统就无法避免对节点管理的问题(需要实时感知 ...

  5. 通过ESP8266WiFi模块调用“心知天气”接口 获取天气信息

    在分析代码之前,首先介绍 ArduinoJson 库的安装及"心知天气"的ID申请 一.安装 ArduinoJson 库 进入 Arduino 开发环境后,选择菜单栏-->工 ...

  6. python 小顶堆

    from heapq import *heap=[]for i in range(10,1,-1): heappush(heap,i)print(heap)print(heappop(heap))pr ...

  7. nnlog 日志模块

    python自带的logging模块理解起来比较费劲,直接pip install nnlog即可 1 import nnlog 2 log = nnlog.Logger(file_name='my.l ...

  8. 如何在win10网络中发现自己？

    第一步:win10共享媒体流的操作步骤: 1.点击右下角网络-网络和Internet设置 2.进入设置界面后点击网络和共享中心 3.在共享中心界面点击媒体流式处理选项 4.点击启用媒体流 5.设置媒体 ...

  9. beanshell 响应数据的解析与变量的保存

    获取响应的数据 response = prev.getResponseDataAsString() //prev.getResponseDataAsString是Jmeter提供的方法,可以调取上次请 ...

  10. 冒泡排序快速排序C语言

    //冒泡排序 void BubbleSort(ElemType A[], int n) { int i, j, temp; int flag=1; for (i = 1; i <= n - 1& ...