写项目的时候,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. 洛谷 P4048更新题面

    [JSOI2010]冷冻波 题目描述 WJJ 喜欢"魔兽争霸"这个游戏.在游戏中,巫妖是一种强大的英雄,它的技能 Frozen Nova 每次可以杀死一个小精灵.我们认为,巫妖和小 ...

  2. 【Frida】启动手机上的Frida插件

    运行以下命令可以保证Frida一直在手机上运行,不关机,Frida就不关 adb shell su -c "./data/local/frida-server-15.2.2-android- ...

  3. 《Toward Fast, Flexible, and Robust Low-Light Image Enhancement》

    1.(23条消息) 图像增强评价标准EME和matlab代码_eme指标_zhonglingyuxiuYYX的博客-CSDN博客 2.nn.moduleList 3.LOE:lightness ord ...

  4. Linux系统Shell脚本第四章:shell函数

    目录 一.shell函数 1.函数的作用 2.函数使用步骤 3.定义函数基本格式 4.函数变量 5.退出函数 6.函数位置变量与脚本位置变量区别 一.shell函数1.函数的作用定义较为复杂的但是需要 ...

  5. GP232RL国产USB串口如何兼容FT232RL开发资料

    GP232RL是最新加入 ftdi 系列 usb 接口集成电路设备的设备. 232r是一个 usb 到串行 uart 接口,带有可选的时钟发生器输出,以及新的 ftdichip-idTM 安全加密器特 ...

  6. HIVE- concat方法

    (1)concat_ws() select user ,concat_ws(';' , collect_set(cast(amt as string))) as amt from table grou ...

  7. gitee 操作

    腾讯软件搜索 腾讯软件中心-海量软件高速下载 (qq.com) git,下载 git,安装.右键git bash here,输入,Git clone url地址.输入码云用户名密码,下载 $ Git ...

  8. flutter Slivers

    一. Slivers 我们考虑一个这样的布局:一个滑动的视图中包括一个标题视图(HeaderView),一个列表视图(ListView),一个网格视图(GridView). 我们怎么可以让它们做到统一 ...

  9. AWT+Swing实现百度图像识别

    1准备 1.1在百度智能云中创建自己的应用,得到API Key和Secret Key 1.2maven导入SDK依赖 2源码 import java.net.URLEncoder; /** * 植物识 ...

  10. 斐讯K2_V22.6.507.43降级+刷机整个过程

    K2刷机整个过程 (包括降级) 开始之前请先下载好相对应的工具包,其中包括: 官方固件:"K2_V22.6.506.28.bin"."K2_V22.6.507.43.bi ...