写项目的时候,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. 沁恒蓝牙系列芯片USB烧录故障排查

    目录 使用USB烧录时让ISP工具能够识别芯片的操作是按住评估板上的"Download"按键,或者将PB22短接到GND,同时给板子上电.若是第一次拿到芯片,codeflash中是 ...

  2. Kubernetes--Pod对象的生命周期

    Pod对象自从其创建开始至其终止退出的时间范围称为其生命周期.在这段时间中,Pod会处于多种不同的状态,并执行一些操作:其中,创建主容器(main container)为必需的操作,其他可选的操作还包 ...

  3. UE4大地图(流关卡、无缝地图)

    原作者:xiaosongfang 对于UE4来说我只是个菜鸟,研究一下网上的教程稍微尝试的做一下demo,所以可能下面会有描述不准确或者说没解释清的地方请多谅解哈.也非常欢迎指出我说的不对的地方一起学 ...

  4. 实验一-Password engine-加密API研究

    加密API研究 181210 一.列举API在编程中的使用方式 GMT 0016-2012 类型定义 typedef struct Struct_DEVINFO{ VERSION Version; C ...

  5. 如何添加Eclipse项目到SVN资源库

    Eclipse项目添加到SVN版资源库有如下好处:一是轻松备份,每天做的修改内容一键提交:二方便合作,比较大的项目,多个人一起工作的时候,每人及时将完成的代码提交,别人可以下载浏览:三展示项目完成进度 ...

  6. 利用XtraBackup实现PXC数据库的热备份

    PXC 容器中安装XtraBackup apt-get updata 1.在宿主机创建数据库卷,将数据卷映射到某个数据库的节点上 docker volume create backup 2.暂停nod ...

  7. 小白之Python-基础中的基础02

    Python-基础中的基础02 继续整理笔记,反复练习!fighting! -----------------华丽的分界线-------------变量:第一次出现叫做定义变量,再次出现为为该变量赋值 ...

  8. VMware Workstation 未能启动VMware Authentication Service

    (1)今天像往常一样打开vmware启动虚拟机,但是弹出个框,显示VMware Workstations 未启动VMware Authorization Service,让我尝试手动启动. (2)Wi ...

  9. MCU构成及其运行原理

    MCU构成及其运行原理 1. MCU概念 MCU,微控制单元(Microcontroller Unit) ,又称单片微型计算机(Single Chip Microcomputer )或者单片机,是把中 ...

  10. mysql常用语句操作

    概述: 1.通过表结构介绍.来操作mysql常用的语法&语句: 2.现在学习下几个基本的sql语句,万变不离其宗,把基础弄扎实了其它的就很容易了 一.表结构&建表: 1.学生基础信息表 ...