最近在自定义一个swiper 插件 发现引用之后不定时一直在报错

Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')

一个undefined一直被监听事件而且有时候有有时候没有在后续过程中不定时的报错很苦恼

具体错误:

看了一下是swiper 的autoplay 文件有问题 而且这个问题只要页面一离开就会报错

解决方法(改源码的小方法)

1. 到node_modules文件中找到自己下载的swiper  文件

2. 我引入的文件是swiper/bundle 文件

// 引入库
import Swiper from "swiper/bundle";

3. 当然你可以去找到swiper 的package.json文件找到你引入的地址对应的文件(如果你直接引入就是那个主文件main)

4.然后到swiper-bundle.esm.js文件找到那个出问题的包modules/autoplay/autoplay.js

5.然后vscode 可以直接按住ctrl 点击就能进入文件里面

6.查找浏览器报错代码

7.然后ctrl + f 查找一下 报错的代码swiper.$wrapperEl[0].addEventListener(event, onTransitionEnd

8.打印一下这个被监听的元素  发现不定时找不到这个元素

9.解决办法在元素前面加个?来判断一下 如果前面为假就不执行了

就不报错了

当然如果你有更好的办法请一定告诉我!!!

 

解决swiper组件autoplay报错问题的更多相关文章

  1. 解决eclipse spring配置报错:cvc-elt.1: Cannot find the declaration of element

    解决eclipse spring配置报错:cvc-elt.1: Cannot find the declaration of element 'beans'.Referenced file conta ...

  2. Mysql备份迁移——MySqlBackup(.net)——(无法解决视图嵌视图报错)

    这里是利用MySqlBackup,可以再nuget中下载. 无法解决视图嵌视图报错的问题,只导表跟数据比较合适,如果有视图嵌视图,请参照Mysql备份迁移——Mysqldump(.NET调用Mysql ...

  3. 解决一个报表EdmFunction报错问题

        最近测试组提了一个bug,说是某个报表点击查询报错,查看错误log,错误信息如下. 类型"Ticket.Data.SqlFuns"上指定的方法"Boolean C ...

  4. 解决cookies存储中文报错问题

    URLEncoder.encode("username", "UTF-8"); URLDecoder.decode("123", " ...

  5. 解决spring boot启动报错java.lang.NoClassDefFoundError: ch/qos/logback/classic/Level

    解决spring boot启动报错java.lang.NoClassDefFoundError: ch/qos/logback/classic/Level 学习了:https://blog.csdn. ...

  6. 解决centos7下 selenium报错--unknown error: DevToolsActivePort file doesn't exist

    解决centos7下 selenium报错--unknown error: DevToolsActivePort file doesn't exist 早上在linux下用selenium启动Chro ...

  7. 如何解决金蝶IKernel.exe报错 Windows Installer 错误 重新安装、无法卸载

    如何解决金蝶IKernel.exe报错 Windows Installer 错误 金蝶这个小婊子,就是这么贱. 卸载了高版本的,再安装低版本就不能安装上,死活都不能安装. 请手动启动一下Install ...

  8. 完美解决 scipy.misc.imread 报错 TypeError: Image data cannot be converted to float

    File "/home/harrison/anaconda3/lib/python3.7/site-packages/matplotlib/image.py", line 634, ...

  9. 解决vue安装less报错Failed to compile with 1 errors的问题

    1.创建vue项目后安装less,执行 npm install less less-loader --save-dev 下载版本为:less-loader@6.1.0 , less@3.11.3,重启 ...

随机推荐

  1. 机器学习基础:用 Lasso 做特征选择

    大家入门机器学习第一个接触的模型应该是简单线性回归,但是在学Lasso时往往一带而过.其实 Lasso 回归也是机器学习模型中的常青树,在工业界应用十分广泛.在很多项目,尤其是特征选择中都会见到他的影 ...

  2. 字符串压缩(二)之LZ4

    本文来自博客园,作者:T-BARBARIANS,转载请注明原文链接:https://www.cnblogs.com/t-bar/p/16451185.html 谢谢! 上一篇对google精品ZSTD ...

  3. idea 错误: 找不到或无法加载主类 xx.xxx.Application

    原因module 里面缺少iml文件 生成iml文件方法二:(建议):刷新一下Maven Project就会自动生成.iml文件.点击下图红框标记的按钮即可 完成后就会自动生成.iml文件. 方法二: ...

  4. day10 Map_查找与遍历

    Map 查找表 Map体现的结构是一个多行两列的表格,其中左列称为key,右列称为value. Map总是成对保存数据,并且总是根据key获取对应的value.因此我们可以将查询的条件作为key查询对 ...

  5. IDEA快捷键之html篇-2

    .qa-item .qa-item-ft .icon { display: inline-block; width: 16px; height: 16px; vertical-align: sub; ...

  6. 【前端面试】Vue面试题总结(持续更新中)

    Vue面试题总结(持续更新中) 题目参考链接 https://blog.csdn.net/weixin_45257157/article/details/106215158 由于已经有很多前辈深造VU ...

  7. .Net CLR GC 动态加载短暂堆阈值的计算及阈值超量的计算

    前言: 很多书籍或者很多文章,对于CLR或者GC这块只限于长篇大论的理论性概念,对于里面的如何运作模式,却几乎一无所知.高达近百万行的CPP文件,毕竟读懂的没有几个.以下取自CLR.Net 6 Pre ...

  8. 剑指offer——day-1

    今天开始记录一下剑指offer的题目训练,提升一下自己的编程能力吧 题目一: 用两个栈实现一个队列.队列的声明如下,请实现它的两个函数 appendTail 和 deleteHead ,分别完成在队列 ...

  9. 2539-SpringSecurity系列--在有安全验证的情况下做单元测试Test

    在有安全验证的情况下做单元测试Test 版本信息 <parent> <groupId>org.springframework.boot</groupId> < ...

  10. Vue3系列1--配置环境和创建项目

    1.安装nodejs(建议最新版本) 下载地址:下载 | Node.js 中文网 在安装的过程中建议不要装在C盘,安装完成配置环境变量,并且建议讲缓存路径更改. 安装完成后通过查看nodejs版本和n ...