木灵鱼儿

木灵鱼儿

阅读：2701

最后更新：2021/07/09/ 16:36:58

关于Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.的新解决方案

一般出现这个问题，肯定大部分人都是使用default-passive-events插件。

但是随着项目的扩大，default-passive-events难免会和其他插件产生冲突，比如canvas库konvajs。

在使用konvajs和default-passive-events后，肯定会报：

拖拽时

Unable to preventDefault inside passive event listener invocation.

没办法，我们只能禁用default-passive-events插件

我们新建一个polyfill.js文件

polyfill.js

/*
 * @Author: mulingyuer
 * @Date: 2021-07-09 16:18:51
 * @LastEditTime: 2021-07-09 16:19:19
 * @LastEditors: mulingyuer
 * @Description: polyfill
 * @FilePath: \saas-admin-vue\src\base\utils\polyfill.js
 * 怎么可能会有bug！！！
 */

//去除谷歌的touch事件警告
(function () {
  if (typeof EventTarget !== "undefined") {
    let func = EventTarget.prototype.addEventListener;
    EventTarget.prototype.addEventListener = function (type, fn, capture) {
      this.func = func;
      if (typeof capture !== "boolean") {
        capture = capture || {};
        capture.passive = false;
      }
      this.func(type, fn, capture);
    };
  };
}());

然后再main.js文件中引入，一定要在vue初始化之前，最好这个放最开头

main.js

require("./base/utils/polyfill"); // 去除touch事件谷歌提示

然后即可搞定。

这个方案实在jq的板块里找到的，也是难得，贴一下出处：

《Added non-passive event listener to a scroll-blocking 'touchstart' event》

文章分类 vue 项目实战
文章标签 警告vuescroll-blockingnon-passivepassive
木灵鱼儿

木灵鱼儿

发布了 716 篇文章获得点赞 58获得阅读 2701

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 58
文章被阅读 2701

相关文章

利用发布订阅模式封装一个IntersectionObserver利用发布订阅模式封装一个IntersectionObserver
typecho 自定义分类和分类高亮处理typecho 自定义分类和分类高亮处理
ts封装一个localStorage和sessionStorage的类ts封装一个localStorage和sessionStorage的类
利用typescript实现原生css变量的主题切换功能类利用typescript实现原生css变量的主题切换功能类
typecho主题开发：基于webpack5的多页面打包项目typecho主题开发：基于webpack5的多页面打包项目

目录树