Vue中使用Swiper绑定事件不生效的解决办法

最新推荐文章于 2024-05-14 16:15:15 发布

原创最新推荐文章于 2024-05-14 16:15:15 发布 · 7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #Swiper #事件委托

踩坑日记专栏收录该内容

0 篇文章

订阅专栏

本文介绍在Vue项目中使用Swiper组件时，设置Loop模式下点击事件不生效的问题及三种解决办法：直接使用Swiper.on绑定事件、事件委托绑定给父级元素和直接操作DOM绑定事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue中使用Swiper绑定事件不生效的解决办法

最近做项目使用了Swiper，遇到的坑是设置Swiper为Loop时，绑定的点击事件部分会不生效。

一.解决办法

不用Vue的v-bind去绑定事件，直接用Swiper的on去绑定事件即可。如下，click的事件绑定自己method中的事件即可。

var mySwiper = new Swiper('.swiper-container',{
  on:{
    click: function(){
      alert('你点了Swiper');
    },
  },
})

通过事件委托的方式将事件绑定给父级元素，通过e.target拿到当前的slide，来触发Swiper每一个slide的点击事件。（当你的slide中还有多个元素需要绑定不同时间的时候，事件委托的优越性就更加凸显啦~）
第三种感觉是最蠢的方式，可以等待dom加载完成，获取到每一个slide的dom元素，再去给每一个dom绑定对应的点击事件。之所以说这种方法蠢，一是因为在Vue中直接操作的dom的方式本就不值得提倡，二是通过上述事件委托的方式去解决这种问题更合适。Vue中没有做事件委托的处理，很多时候我们通过v-for遍历生成dom，并给每一个dom绑定事件，虽然简便，但是却因为绑定多个事件而增加了开销，所以遇到这种情形，使用事件委托更好一些。

二. 绑定点击事件不生效的原因

出现点击事件不生效的情形在我们使用loop的情况下。原因在于Swiper为了实现loop，会在你自己的slide dom前后各复制一个新的slide，复制的slide仅保留了原来的html和css结构，并没有绑定上原来的事件。

无图无真相~

在这里插入图片描述

图 1.1 swiper复制dom

类名为swiper-slide-duplicate的dom即swiper的复制元素

再进一步的去看一下dom上绑定的点击事件吧~

在这里插入图片描述

图1.2 非复制dom绑定事件

在这里插入图片描述

图1.3 复制dom绑定事件

从图1.2 和图1.3 中可以看到复制的dom仅在container容器上绑定了事件，slide上并没有绑定上事件。

以看到复制的dom仅在container容器上绑定了事件，slide上并没有绑定上事件。

到这里问题的根源就很清晰了，就是单纯复制dom是不顶事的，绑定的点击事件依然无法复制过去。以Vue数据驱动视图的思想来想这个问题，其实还有一种解决办法，即不使用Swiper的loop属性，自己通过扩展数据来复制dom，自己实现无限轮播的效果。但是这种方法只是徒增烦恼啦~有不正确的或者更好的方法，欢迎指正！