swiper 轮播插件点击事件有时不生效

swiper 轮播插件点击事件有时不生效

1. 问题描述

在项目中使用swiper插件时，发现绑定在DOM元素上的点击事件时而有效时而无效。本人项目中swiper-item通过v-for循环列出。

2. 原因

在使用swiper插件时 如果设置 loop: true, 则会导致元素上的点击事件不生效。因为swiper在无限轮播时会自动复制第一个和最后一个页面进行轮播，而且只会复制元素节点，不会复制元素上的绑定事件。

3. 解决方案

（1）不在dom元素上绑定事件

（2）在swiperOption配置中绑定click事件 （详见官网）

swiperOption: { //更多的参数的配置看swiper4官网介绍：http://www.swiper.com.cn/api/navigation/210.html
        slidesPerView: 4, // 设置slider容器能够同时显示的slides数量
        notNextTick: true,
        loop: true,
        autoplay: true,
        direction: 'horizontal',
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        paginationClickable: true,
        scrollbar: '.swiper-scrollbar',//滚动条
        mousewheelControl: true,
        observer: true,
        observeParents: true,
        observeSlideChildren: true,
        on: {
          click: function(e) { // 在此处实现相关业务逻辑
            let tbbsm=e.target.getAttribute('data-tbbsm') // 获取自定义属性
            _this.openDetailDialog(tbbsm)
          },
        },
      },

（3）当点击事件需传参时 – 利用自定义属性

• 给所点击的dom元素设置自定义属性
  <div data-tbbsm='188h90'></div>

// 设置自定义属性时原本直接给父元素添加了属性，但获取时为null，所以此处给每个子元素都添加了（需根据项目情境调整）
<div class="layout-flex mb-10"
               style="width: 100%; height: 20%">
    <img src="../../../../assets/fy_big_screen/位置.png"
         class="mr-6"
         :data-tbbsm="item.tbbsm" />
    <el-tooltip class="item"
                effect="dark"
                placement="top">
      <div slot="content">{{item.adress}}</div>
      <p class="m-text-ellipsis"
         :data-tbbsm="item.tbbsm">{{item.adress}}</p>
    </el-tooltip>
</div>

• 在点击事件中获取自定义属性值

on: {
     click: function(e) { 
         let tbbsm=e.target.getAttribute('data-tbbsm') // 获取自定义属性
         _this.openDetailDialog(tbbsm) // 实现传参
       },
  },