【关于vue-awesome-swiper在ipad中a标签点击事件无效的问题】

最新推荐文章于 2022-10-14 10:38:47 发布
最新推荐文章于 2022-10-14 10:38:47 发布
阅读量646 收藏
点赞数
分类专栏： js vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42446516/article/details/122187540
版权
js 同时被 2 个专栏收录
12 篇文章 0 订阅
订阅专栏
vue
12 篇文章 0 订阅
订阅专栏

关于vue-awesome-swiper在ipad中a标签点击事件无效的问题

最近开发项目的时候在swiper-slide中添加了a标签用于跳转其他网址，结果在iPad Pro4 (12.9)里点击a链接无效，其他设备没有问题，一开始以为是排版导致的层级问题，但在其他设备没问题，就排除这个想法，后来觉得是兼容问题，总之搞了好久没成功

后来同事通过查api发现，是touchStartPreventDefault的默认值是true,默认阻止touchstart (mousedown)的默认事件，设置为false则不阻止。

swiperOption:{

	touchStartPreventDefaul: false,
	...
}

于是问题就解决了，只不过我还是不清楚为什么在其他设备没事，唯独在ipad pro4(12.9)有问题,
如果大家知道为什么，欢迎留言～

萌二è招财猫！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
swiper移动端左右滑动与a标签链接接同时触发解决方案
01-05
swiper移动端左右滑动与a标签链接接同时触发解决方案
swiper遇到轮播a链接点击失效
minmin666666的博客
12-14 1374
设置上防止触摸时触发链接跳转、阻止click冒泡 var mySwiper = new Swiper(’.swiper’,{ preventClicks : false,//防止触摸时触发链接跳转 preventClicksPropagation: true,//阻止click冒泡 paginationClickable: true, loop: true, slidesPerView: 3, spaceBetween: 10, }); ...
Swiper 点击事件 a链接失效
Jovan的博客
01-03 3635
最新写了一个新的响应式网站，里面用到了swiper 组件 1.初始化Swiper  var mySwiper = new Swiper('.swiper-container', { loop: true, // 循环模式选项 preventClicks: false, autoplay: { delay: 3000, stopOnLastSlide: false, disableO...
点击click事件在iPad没有响应
csr0312的专栏
08-19 5575
本来在ipad使用tap事件，工作的很好。但是需求改变，要适应PC跟ipad，所以索性直接替换zepto改成jquery。理想不错，但是现实是，在浏览器上click事件工作得很好，切换到模拟器上面，也运行不错，但是切换到真机ipad上面，悲剧了，根本不响应click事件。查看了一遍又输出，还是木有反应。急了，只能求助谷歌了，click no action in pad 第一条出来的就是stackov
基于vue.js轮播组件vue-awesome-swiper实现轮播图
12-03
一般做移动端轮播图的时候，最常用的就是Swiper插件了，而vue.js也有一个轮播组件vue-awesome-swiper，用法跟swiper相似。 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome...
vue引入新版 vue-awesome-swiper插件填坑问题
11-27
本文介绍了关于新版 vue-awesome-swiper，分享给大家，具体如下： 问题 为什么我的vue-awesome-swiper组件pagination小圆点不显示问题? 为什么我的vue-awesome-swiper不会自动播放？ 为什么我的vue-awesome-...
前端vue-awesome-swiper实现上下两级相互联动
12-02
前端vue-awesome-swiper实现上下两级相互联动，绝对优秀！！！
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
12-12
当时用的是vue-cli-3 + ant-design-vue实现的页面，发现ant-design-vue里头有现成的Carousel组件可用，由于排期比较急，先暂时用这个实现了第一版，没有特效没有其他花里胡哨的展示。验收完第一版后，发现ant-design...
使用swiper插件过程中遇到的问题
linda_417的博客
07-04 5044
一、a链接失效     在使用swiper过程中，发现a链接失效，经过查找分析发现是由于没有设置一个参数preventClicks，该参数默认的值是ture    preventClicks:false
解决vue-awesome-swiper点击事件失效的问题 ===“版本号（vue-awesome-swiper“: “^3.1.0）
西门吹雪
11-21 1万+
解决vue-awesome-swiper点击事件失效的问题 ===“版本号（vue-awesome-swiper”: "^3.1.0） 最新做项目使用了 vue-awesome-swiper（3.1.0版本）轮播插件遇到的坑。 在使用loop: true模式下： 动态循环数据 ，轮播第一遍是点击事件是正常的，轮播第二遍的时候点击事件就失效了 点击事件不起作用 通过查看api , loop模式下会在slides前后复制若干个 slide 但是这个复制只是针对 dom 元素不会带上之前的绑定事件的 ,
关于swiper滑动时a标签误触，导致跳转的解决办法
perry
10-25 3483
1、思路：判断swiper.animating==true，滑动的时候把a标签的默认事件给阻止了，否则，让它跳转 2、代码$(".swiper-slide a").click(function(e){ //console.log(swiper.animating) if(swiper.animating==true){ e.preventDef
使用swiper3的freeMode属性a连接点击失效，跳转无效和 swiper滑动时a标签误触
橙-极纪元-cplvfx-JJY.Cheng
05-09 1215
源代码是这样的： <!------------nav-----------> <div id="topNav" class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide ac...
swiper 关于h5页面无法触发A标签问题
豆芋心的博客
09-15 4769
最近在做h5页面,因为这个h5页面是应用于安卓或ios终端 发现一个问题, h5页面无法触发A标签效果,找了很久才发现原因. 下图  此处没有效果,问题是 swiper是基于移动端触摸的,会有一个全局的click事件,这个事件屏蔽了A标签的链接,是为了防止手机滑动的时候不小心触发A标签而设定的, 解决方法： 将preventClicks : false 设置成False就
关于swiper滑动时a标签误触，导致跳转的解决办法。（简单粗暴）
ma_hao99的博客
05-30 1147
var swiper = new Swiper('.swiper-container', { on: { touchStart: function(event){ event.stopPropagation() }, }, });
关于Swiper3.x的a标签bug
Vic
03-30 5175
Swiper3.x，多页a标签部分浏览器无法点击bug
swiper 插件使用及问题解决
热门推荐
yemuxia_sinian的博客
09-02 2万+
第一次使用swiper，官网的文档什么都没去看，直接用到项目中（移动端的），所以问题也一大堆。主要的几点问题如下：（1）如何在同一页面上使用多个的swiper效果；（2）如何使用tab切换（选项卡效果）； （3）swiper效果的互相嵌套（tab里面嵌套轮播效果） 1、如何在同一页面上使用多个的swiper效果 解决方法：在轮播的最外层如下： 加上一个类名或者id然后根据类名或id来
swiper 和 vue-awesome-swiper 兼容问题 ios9系统下页面白屏问题
会飞的程序猿
10-14 446
【代码】swiper 和 vue-awesome-swiper 兼容问题 ios9系统下页面白屏问题。
swiper链接href无效
weixin_33859231的博客
10-24 852
preventClicks:false,加上属性
vue-awesome-swiper swiper-slide点击事件
最新发布
03-02
vue-awesome-swiper是一个基于Vue.js的轮播组件，它是对Swiper的封装和扩展。swiper-slide是vue-awesome-swiper中的一个组件，用于展示轮播项。要给swiper-slide添加点击事件，可以通过以下步骤实现： 1. 首先，在你的Vue组件中引入vue-awesome-swiper和swiper-slide组件： ```javascript import { swiper, swiperSlide } from 'vue-awesome-swiper' ``` 2. 在template中使用swiper和swiper-slide组件，并给swiper-slide添加@click事件： ```html <swiper> <swiper-slide v-for="(item, index) in items" :key="index" @click="handleSlideClick(item)"> <!-- 轮播项内容 --> </swiper-slide> </swiper> ``` 3. 在methods中定义handleSlideClick方法来处理点击事件： ```javascript methods: { handleSlideClick(item) { // 处理点击事件的逻辑 } } ``` 这样，当用户点击swiper-slide时，handleSlideClick方法会被调用，并传入对应的item参数。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值