最近在自定义一个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. RS485通信电路

    RS485由RS232和RS422发展而来,弥补了抗干扰能力差.通信距离短.速率低的缺点,增加了多点.双向通信能力,即允许多个发送器连接在同一条主线上,同时增加了发送器的驱动能力和冲突保护特性,扩展了 ...

  2. java包机制

  3. Kafka 部署完在服务器端可以访问,而在外部其它电脑访问不了

    Kafka 部署完在服务器端可以访问,而在外部其它电脑访问不了 原因:config/server.properties的listeners和advertised.listeners 不配置的话默认的l ...

  4. 超酷炫的转场动画?CSS 轻松拿下!

    在 WeGame 的 PC 端官网首页,有着非常多制作精良的基于滚动的动画效果. 这里我简单截取其中 2 个比较有意思的转场动画,大家感受感受.转场动画 1: 转场动画 2: 是不是挺有意思的,整个动 ...

  5. 动手实践丨手把手教你用STM32做一个智能鱼缸

    摘要:本文基于STM32单片机设计了一款基于物联网的智能鱼缸. 本文分享自华为云社区<基于STM32+华为云IOT设计的物联网鱼缸[玩转华为云]>,作者: DS小龙哥 . 1. 前言 为了 ...

  6. 啥也不是 -「OI 易犯错误整理」

    原帖出自 Nefelibata,不过他不想维护,所以就交给 STrAduts 了 awa.因为一些不可抗力,帖主转移至 XSC062.申请置顶! 前言 Nefelibata:因为笔者弱到无法形容,因此 ...

  7. Keyboading 思路

    0x01 前置芝士 还是先放个 link 吧. 所需知识点:BFS. 思维难度较高,实现简单. 0x02 题目大意:其实就是给你个图,按顺序走到相应的点,求所需最少步数(走到需要去的点会耗费一次步数) ...

  8. scala WordCount案例

    数据样例: java,spark,hadoop,python,datax java,spark,hadoop,spark,python,datax java,spark,hadoop,python,d ...

  9. Taro框架完美使用Axios

    前言 众所周知,在H5前端开发中,axioshttp库几乎是必选.大部分人都对它的使用非常熟悉.然而在小程序开发中,axios怎么没法用,需要使用对应平台提供的http接口,如微信小程序的wx.req ...

  10. Netty源码解读(二)-服务端源码讲解

    简单Echo案例 注释版代码地址:netty 代码是netty的源码,我添加了自己理解的中文注释. 了解了Netty的线程模型和组件之后,我们先看看如何写一个简单的Echo案例,后续的源码讲解都基于此 ...