在基于 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. 快速认识，前端必学编程语言：JavaScript

    JavaScript是构建Web应用必学的一门编程语言,也是最受开发者欢迎的热门语言之一.所以,如果您还不知道JavaScript的用处.特点的话,赶紧补充一下这块基础知识. JavaScript 是 ...

  2. 吉特日化MES-业务架构第一版图

  3. [ABC281G] Farthest City

    Problem Statement You are given positive integers $N$ and $M$. Find the number, modulo $M$, of simpl ...

  4. oracle12c静默安装

    oracle12c 静默安装 先决条件 ● 至少 1 GB RAM 用于 Oracle 数据库安装.建议使用 2 GB 内存. ● 至少 8 GB RAM 用于 Oracle Grid Infrast ...

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

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

  6. 文心一言 VS 讯飞星火 VS chatgpt （164）-- 算法导论13.1 4题

    四.用go语言,假设将一棵红黑树的每一个红结点"吸收"到它的黑色父结点中,使得红结点的子结点变成黑色父结点的子结点(忽略关键字的变化).当一个黑结点的所有红色子结点都被吸收后,它可 ...

  7. React 类组件转换为函数式

    函数式的 React 组件更加现代,并支持有用的 hooks,现在流行把旧式的类组件转换为函数式组件.这篇文章总结了转换的一些通用的步骤和陷阱. 通用替换 定义 从 class (\w+) exten ...

  8. vulnhub - Aragog - writeup

    信息收集 目标开放了80.22端口. root@Lockly temp/tmp » arp-scan -I eth1 -l Interface: eth1, type: EN10MB, MAC: 00 ...

  9. Shell脚本实践总结

    对比大小 符号用法:(必须使用双括号) < 小于     (( "$a" < "$b" ))  <= 小于等于   (( "$a&q ...

  10. 【华为云技术分享】STM32L476移植华为LiteOS系列教程（二）---开发前准备

    在进行移植华为LiteOS开发工作之前,我们是需要提前做一些准备工作,如:开发工具.环境.源码等相关事宜. 一.准备开发工具 STM32CubeMX用于生成工程文件:STM32CubeMX下载地址 I ...