Vue控制台警告:  Added non-passive event listener to a scroll-blocking 'touchmove' 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://blog.csdn.net/dj0379/article/details/52883315
————————————————
版权声明:本文为CSDN博主「羊羊羊92」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_40716786/article/details/90045802

Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive的更多相关文章

  1. [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

    相信如果用谷歌浏览器做移动端页面的时候 用touch事件的时候应该遇到过这个东东吧 documet.addEventListener("touchstart",function() ...

  2. Unable to preventDefault inside passive event listener due to target being treated as passive

    Unable to preventDefault inside passive event listener due to target being treated as passive 今天在做项目 ...

  3. Unable to preventDefault inside passive event listener

    最近做项目经常在 chrome 的控制台看到如下提示: Unable to preventDefault inside passive event listener due to target bei ...

  4. 滑动时候警告:Unable to preventDefault inside passive event listener

    1 前言 在制作2048时,需要在手机端添加滑动检测事件,然后发现控制台有警告,如下: main2048.js:218 [Intervention] Unable to preventDefault ...

  5. 移动端页面滑动时候警告:Unable to preventDefault inside passive event listener due to target being treated as passive.

    移动端项目中,在滚动的时候,会报出以下提示: [Intervention] Unable to preventDefault inside passive event listener due to ...

  6. [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

    1.滑动时候警告[Intervention] Unable to preventDefault inside passive event listener due to target being tr ...

  7. IScroll Unable to preventDefault inside passive event listener due to target being treated as passive

    最近两天企业微信下IScroll突然无法滚动了,特别慢,之前好好的,发现主要是有红色的Unable to preventDefault inside passive event listener du ...

  8. 引用fastclick.js或使用触屏监听 滑动屏幕报错:解决[Intervention] Unable to preventDefault inside passive event listener

    使用fastClick.js所产生的一些问题 开发h5活动页时想到移动端会有300ms的延迟,于是便打算用fastClick.js解决. 页面引入fastClick.js后,滑动H5页面的时候发现谷歌 ...

  9. Android事件监听器Event Listener

    在 Android 中,我们可以通过事件处理使UI与用户互动(UI Events). UI的用户事件处理,即View处理用户的操作,在应用程序中几乎不可避免.View是重要的类,它是与用户互动的前线: ...

随机推荐

  1. archlinux下安装nvidia驱动解决Nvidia显卡显示问题

    root下使用以下命令: sudo pacman -S nvidia nvidia-libgl

  2. window10安装nginx及请求转发到tomcat服务器访问项目及开机自启

    一.安装ngnix 1.  到nginx官网上下载相应的安装包,http://nginx.org/en/download.html: 下载进行解压,将解压后的文件放到自己心仪的目录下,我的解压文件放在 ...

  3. 记录 Docker 的学习过程 (安装基础篇)

    docker 通过内核来实现 特点是效率高 1. centos7 三台(推荐2c 4g 最低 1c1g)2. 关闭防火墙 selinux3. 做好主机名解析,三台能互相ping通主机名host参考文件 ...

  4. 部件MSCOMCTL.OCX或其附件之一不能正确注册:一个文件丢失或无效

    部件MSCOMCTL.OCX或其附件之一不能正确注册:一个文件丢失或无效: https://blog.csdn.net/yilese/article/details/71479908

  5. 初识消息队列--ActiveMq

    消息队列 即MessageQueue,是一种消息中间件,在遇到系统请求量比较大的情况下,导致请求堆积过多无法及时返回,可以通过它进行异步的消息处理,从而缓解系统压力. ActiveMq ActiveM ...

  6. appium+android测试环境安装

    1. jdk配置 一.背景 JDK已经更新到12了,但是由于很多工具仍然未及时更新,故推荐最稳定的JDK版本1.8.x: JDK需要配置通常情况下,JDK配置分为三项: JAVA_HOME:某些软件仍 ...

  7. HTML /和./的区别 - Web开发

    "/"访问根目录 例1 https://www.cnblogs.com/test 里有 <a href="/Edsuns"></a> 则 ...

  8. Ubuntu下vsc+python3配置

    我发现直接搜这个很容易得到过时的文章py2请滚蛋好么 1.首先下去VSC官网下载.deb的安装包,安装好vsc,打开后安装PYTHON,reload下.别啊忘记修改路径,setting下搜python ...

  9. 关于“教室派”APP的使用报告和相关建议

    教室派APP能够很好的解决学生查询各教室占用情况这一问题,使用起来非常方便.用户可根据需要选取星期来查询不同教学楼教室使用情况. 编辑课表是其附带功能,但通过使用发现手动编辑课表效率太低,建议开发者加 ...

  10. js获取自定义data属性

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...