写项目的时候，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. Iperf参数详解

    IperfIperf是一个网络性能测试工具,可以测试TCP和UDP最大带宽,具有多种参数和UDP特性,可以根据需要调整,报告带宽,延迟,数据包丢失 通用参数-b(bandwidth):指定UDP模式使 ...

  2. TensorFlow学习报告

    TensorFlow简介 是一个基于计算图的深度学习库,具有更广泛的应用领域.良好的多语言支持.部署性能等优点,时现今最广泛使用的深度学习框架. 计算图Session Tensor 1 import ...

  3. Angular单页应用程式 (SPA)+Azure AD重新导向登入

    一.app.module.ts中设定应用程式 1.将MSAL Angular相关设置封装为auth.module.ts import { NgModule } from '@angular/core' ...

  4. vue 滑动到指定位置

    在Vue中,有三种方式可以实现H5页面滑动至指定位置 方法1: //先获取目标位置距离 mounted() { this.$nextTick(() => { setTimeout(() => ...

  5. 微服务笔记之Eureka03(服务续约分析)

    服务续约接口分析 com.netflix.eureka.resources.InstanceResource#renewLease public Response renewLease( @Heade ...

  6. http如何全站301重定向到https

    对于301重定向这一概念玩SEO的同志们都不陌生了,近些年来https协议越来越火,谷歌已经明确了使用https相对http来说会有更好的排名,再加上百度大大已经明确了对https的扶持政策,老威现在 ...

  7. 存储单位bit、byte、KB、MB、GB、TB、PB、EB、ZB、YB、BB、NB、DB、CB、XB

    bit(binary digit)比特,这是表示信息的最小单位,它只能表示 0 或 1. byte(字节),其表示的值范围是0~255(无符号) 或 -127~127(有符号),1 byte = 8 ...

  8. Micro-OA系统

    Micro-OA简单描述 MicroOA是一款不需要专业的开发知识或开发经验,通过页面交互式即可实现动态搭建表单的微型办公自动化系统.在日常工作当中,我们面临着各种各样的表单,在开发系统时,若我们采用 ...

  9. 24_webpack_打包分析

    一.打包时间的分析 如果我们希望看到每一个loader和plugin消耗的打包时间,可以借助于一个插件:speed-measure-webpakc-plugin 安装:npm i speed-meas ...

  10. PowerShell Regex

    PowerShell默认按每一行遍历去匹配模式 比如"aaa`nbbb"用"a.*b"是匹配不到的 需要用"(?s)a.*b"来匹配 1. ...