vue中,解决chrome下,的warning, Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event 问题
写项目的时候,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 问题的更多相关文章
- vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上
一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说, ...
- vue中解决时间在ios上显示NAN的问题
最近在用vue,遇到倒计时在ios上显示为NAN的问题. 因为做的是倒计时支付,思路是获取服务器时间和下单时间,再转成秒级时间戳做差值. 在网上找到说是ios 不支持例如2018-09-01 10:0 ...
- vue中解决拖动和点击事件的冲突
BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse事件的执行顺序为onmousedown =>onmouseup => ...
- vue中解决跨域问题
方法1.后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Metho ...
- Vue中解决路由切换,页面不更新的实用方法
前言:vue-router的切换不同于传统的页面的切换.路由之间的切换,其实就是组件之间的切换,不是真正的页面切换.这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页 ...
- 解决chrome下上传文件 返回值带 <pre style="word-wrap:break-word;white-space:prewrap;"></pre>
解决办法:后台 response.setContentType("text/html");
- 解决Chrome下表单自动填充后背景色为黄色
Chrome浏览器在表单自动填充后会显示黄色背景,这是Chrome的私有属性导致,对于有洁癖的人来讲,是不喜欢的,我们可以手动去掉. 代码如下: input:-webkit-autofill { -w ...
- vue中解决three.js出现内存泄漏丢失上下文问题
在跳转页面时添加以上代码即可. 在spa项目中,跳转页面并不会清楚已经创建的webgl实例,需要手动清楚.
- Vue中解决新脚手架3创建项目的移动端双击屏幕放大,双手拉动放大的方法
替换新版vue-cli创建项目的public>index.html <!DOCTYPE html> <html lang="en"> <head ...
- chrome 下修改 agent 的方法
前言 这篇文章和 tiankonguse 的个人网站里的文章保持同步. 很早之前,在 chrome 下修改 agent 的方法是使用 chrome 插件. 后来 chrome 的某一个版本中自带这个功 ...
随机推荐
- MAC怎么快速截图
1.截取全屏 按住[command][shift][3]这三个键即可截取全屏. 编辑 2.截取某区域 按住[command][shift][4]. 编辑 3.截图完成 在电脑桌面能找到截图 ...
- case语法案例
case语法案例 制作nginx启停脚本 1.条件: 2.思路: 3.脚本 添加删除openvppn用户的脚本 1.实现要求 2.具体脚本 case语法案例 制作nginx启停脚本 1.条件: 启动服 ...
- C# 日期获得一天的起始时间
dateTimePicker1.Value = Convert.ToDateTime(DateTime.Now.ToString("yyyy-MM-dd 00:00:00")); ...
- c-->static关键字的使用
static关键字的使用 static:静态 未使用static 在下列代码中变量a是有生命周期的,调用完后就会被销毁 所以for循环每次调用test函数打印的结果都是2 #include <s ...
- java spring 理解
1.spring IOC容器 其实就是 new 了一个 ApplicationContext 类对象.->应用上下文对象. 2.应用上下文对象 实例化.配置,并管理 bean. 所以上下文对象是 ...
- 性能测试-sysstat工具包(mpstat-主要查看CPU负载与iostat-看数据换入换出以及pidstat-主要看上下文切换)
1.mpstat概述 mpstat (multiprocessor state) 可以查看所有cpu的平均负载,也可以查看指定cpu的负载.所以mpstat其实就是主要查看CPU负载的一个工具.是一款 ...
- 专业视频图片水印清除工具丨HitPaw Watermark Remover 2.1.3
软件下载 MAC/Windows HitPaw Watermark Remover 软件介绍 HitPaw Watermark Remover 是一款能够轻松去除图片视频水印的软件.对于有水印的图片视 ...
- OM6621P系列国产M4F内核低功耗BLE5.1 SoC蓝牙芯片
随着5G与物联网时代到来,智慧城市.电动出行.智能家居.可穿戴设备等应用高速发展,低功耗蓝牙技术在近几年智能化浪潮中的地位也尤为重要.OM6621P系列的开发即是为解决国内低功耗蓝牙应用设计需求,其主 ...
- python_test_0001_base_string_swap
#!/usr/bin/python # -*- coding: UTF-8 -*- import time from lib_001_decorator_log_funcname import dec ...
- Linux下安装MongoDB的Database Tools并配置
安装tools以使用导入导出功能.解决mongodump: command not found #下载 wget https://fastdl.mongodb.org/tools/db/mongodb ...