在基于 Element-ui 写项目的时候，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'

[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event.的更多相关文章

  1. Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive

     Vue控制台警告:  Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider markin ...

  2. [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() ...

  3. 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' eve ...

  4. 设置点击事件时Unable to preventDefault inside passive event listener due to target being treated as passive

    问题 当使用fastClick.js设置点击事件时,控制台报错: [Intervention] Unable to preventDefault inside passive event listen ...

  5. 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 今天在做项目 ...

  6. Unable to preventDefault inside passive event listener

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

  7. 滑动时候警告：Unable to preventDefault inside passive event listener

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

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

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

  9. [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 ...

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

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

随机推荐

  1. [ABC270Ex] add 1

    Problem Statement You are given a tuple of $N$ non-negative integers $A=(A_1,A_2,\ldots,A_N)$ such t ...

  2. [ABC262G] LIS with Stack

    Problem Statement There is an empty sequence $X$ and an empty stack $S$. Also, you are given an inte ...

  3. 可视化学习：CSS transform与仿射变换

    引言 在几年前,我就在一些博客中看到关于CSS中transform的分析,讲到它与线性代数中矩阵的关系,但当时由于使用transform比较少,再加上我毕竟是个数学学渣,对数学有点畏难心理,就有点看不 ...

  4. Odoo Windows系统下部署方法

    Windows 系统下 Odoo 环境搭建流程 ① 安装python2.7 安装完成后 在命令行(cmd)输入python 如果不出现内部错误提示则表示环境配置成功    当出现错误时要设置环境变量 ...

  5. Python——Html（HEAD头部）

    HTML中HEAD头部设置(了解) 在HTML中,<head> 元素是文档的头部部分,通常包含了一些关于文档的元信息和链接到外部资源的标签.以下是一些常见的 <head> 元素 ...

  6. 机器学习周刊03:如何学习深度学习？2024 年学习生成式 AI 路线图、如何构建高效的RAG系统、苹果 腾讯最新论文、阿里DreaMoving

    腾讯推出的 AppAgent,是一个多模态智能体,通过识别当前手机的界面和用户指令直接操作手机界面,能像真实用户一样操作手机! 机器学习周刊:关注Python.机器学习.深度学习.大模型等硬核技术 1 ...

  7. 文心一言 VS 讯飞星火 VS chatgpt （19）-- go语言的slice和rust语言的Vec的扩容流程是什么？

    go语言的slice和rust语言的Vec的扩容流程是什么? 文心一言: 在Go语言中,slice(切片)和Rust语言中的Vec都是用于存储一组固定长度的元素的数据结构.它们的扩容流程略有不同,下面 ...

  8. 7、Flutter GridView网格布局组件(遍历)

    GridView创建网格列表主要有下面三种方式 1.可以通过GridView.count 实现网格布局    一行的 Widget 数量 class HomePage extends Stateles ...

  9. 储存入redis并且将次数进行+1

    // 储存入redis并且将次数进行+1stringRedisTemplate.opsForValue().increment(RedisKey.LOGIN_FATL_NUM + "1348 ...

  10. Spark Core快速入门

    Spark-core快速入门 一.简介 Apache spark是专门为大规模数据处理而设计的快速通用的计算模型,是一种类似于Mapreduce通用并行计算框架,与mapreduce不同的是,spar ...