swiper 关于h5页面 360浏览器,安卓或ios终端,无法触发A标签问题

本文探讨了在使用Swiper组件时遇到的A标签点击失效问题,详细解释了这一现象的原因在于Swiper的全局click事件,旨在防止手机滑动中误触A标签。文章提供了解决方案,通过修改Swiper配置或使用JavaScript监听A标签,确保在滑动过程中不会触发跳转,而在滑动停止后正常响应。

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

最近在做h5页面,因为这个h5页面是应用于安卓或ios终端 发现一个问题, h5页面无法触发A标签效果,找了很久才发现原因.

下图 

此处没有效果,问题是 swiper是基于移动端触摸的,会有一个全局的click事件,这个事件屏蔽了A标签的链接,是为了防止手机滑动的时候不小心触发A标签而设定的,

解决方法:

将preventClicks : false 设置成False就可以了

 

关于swiper滑动时a标签误触,导致跳转的解决办法

 

1、思路:判断swiper.animating==true,滑动的时候把a标签的默认事件给阻止了,否则,让它跳转 
2、代码

$(".swiper-slide a").click(function(e){

        //console.log(swiper.animating)
        if(swiper.animating==true){
            e.preventDefault();
        }else {
            location.href = $(this).attr("href")
        }
    });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值