关于Swiper3.x的a标签bug

发现问题:

前些日子做移动端需求用到了Swiper插件,版本是 3.0.0,测试发现如果在多个swiper-slide中添加a标签,那么在搜狗手机浏览器魅族手机系统浏览器(暂时只发现这两款有问题)中只有第一屏的a标签可点击,而其他屏的a标签似乎被什么东西覆盖了。

测试代码如下:

<div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1<a href="#">ClickMe</a></div>
    <div class="swiper-slide">Slide 2<a href="#">ClickMe</a></div>
    <div class="swiper-slide">Slide 3<a href="#">ClickMe</a></div>
    <div class="swiper-slide">Slide 4</div>
</div>

然后我尝试了目前最新版 3.0.4,也存在同样问题,而 2.x 没有问题。


解决方案:

很走运的是,当我尝试在各个层加a标签测试是否也有bug时,发现如果DOM结构为下就不会出现bug:

<div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1<a href="#">ClickMe</a></div>
    <div class="swiper-slide">Slide 2<a href="#">ClickMe</a></div>
    <div class="swiper-slide">Slide 3<a href="#">ClickMe</a></div>
    <div class="swiper-slide">Slide 4</div>
    <a href="#">ClickMe</a>
</div>

即,在swiper-slide同级添加一个a标签,上面的a标签就都可以点击了,是不是很怪异 :D。
没有找到反馈给Swiper开发组的途径,官网提供的q群里也没人知道,如果哪位大神小神有完美解决方案,恳请告知!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值