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. BandwagonHost VPS CentOS7系统启用EPEL源

    BandwagonHost默认安装好了EPEL源,只是默认没有启用,所以很多软件都无法安装.我们需要手动启用一下,才能安装里面的软件. # vim /etc/yum.repos.d/epel.repo ...

  2. [SHOI2001] 小狗散步 - 二分图匹配

    考虑到每次与主人相遇之前最多只去一个景点,很容易转化为匹配问题 由于数据很小,我们不妨枚举每个相遇点间隙和每个景点,判断是否来得及,如果来得及就连边 沙雕题搞了二十来分钟,我是憨憨 #include ...

  3. MyBatis的手动映射与模糊查询

    一.手动映射 当实体类属性与数据库字段名不同时,无法自动映射,导致查询出空值,这时候可以使用手动映射 在select节点添加resultMap属性与resultMap节点建立关系

  4. DataGrid 的DataSource重新加载数据

    DataGrid 的DataSource重新加载数据,若直接重新给DataSource赋值是没有效果的,若只是修改原有数据中的单个值,此方法有效,但是针对完全不一样的数据直接重新赋值的方式是无效的,此 ...

  5. eclipse中部署项目到tomcat启动,一直是starting状态

    这个问题主要是在eclipse中设置了proxy代理导致的,将Network Connections中的Active Provider更改即可! 打赏

  6. 一个vue的日历组件

    说明: 1.基于element-ui开发的vue日历组件. 地址 更新: 1.增加value-format指定返回值的格式2.增加头部插槽自定义头部 <ele-calendar > < ...

  7. AE 打开Shp文件

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  8. 算法竞赛入门经典第二版 TeX中的引号 P47

    #include<bits/stdc++.h> using namespace std; int main(){ ; while( (c = getchar()) !=EOF) //get ...

  9. 采用PHP实现”服务器推”技术的聊天室

      传统的B/S结构的应用程序,都是采用”客户端拉”结束来实现客户端和服务器端的数据交换. 本文将通过结合Ticks(可以参看我的另外一篇文章:关于PHP你可能不知道的-PHP的事件驱动化设计),来实 ...

  10. 解决wxpy获取不到指定群聊对象的情况

    我们可以通过Bot.friends 以及Bot.groups 来获取到所有的好友以及聊天群,这里需要注意的是,聊天群需要保存到通讯录中,不然可能会出现找不到聊天群的情况. 摘自:http://www. ...