vant 滑动轮播时为什么触发了 click 事件？

最新推荐文章于 2023-11-07 19:12:26 发布
最新推荐文章于 2023-11-07 19:12:26 发布
阅读量1.6k 收藏 1
点赞数 1
原文链接：https://blog.youkuaiyun.com/weixin_42178050/article/details/104846365
版权
本文探讨了在使用Swipe组件时遇到的滑动轮播与click事件冲突的问题，指出此现象由fastclick库引发。fastclick通过Touch事件模拟click事件，而Swipe阻止touchmove事件冒泡，两者不兼容导致冲突。解决方法是将Swipe的stop-propagation属性设为false。

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

滑动轮播时为什么触发了 click 事件？
这种情况通常是由于项目中引入了fastclick库导致的。fastclick的原理是通过 Touch 事件模拟出 click 事件，而 Swipe 内部默认会阻止 touchmove 事件冒泡，干扰了 fastclick 的判断，导致出现这个问题。

将 Swipe 组件的 stop-propagation 属性设置为 false 即可避免该问题。


原文链接

tingting@Wang
关注
vue-cli3.0+vant出现的问题总结
Lschange的博客
04-30 4929
1、轮播图在ios9以下都不能滑动 解决办法： https://github.com/surmon-china/vue-awesome-swiper npm install vue-awesome-swiper --save 全局引入 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper...
vue Vant ImagePreview 图片预览 实现滑动
qq_49879334的博客
06-18 1797
需求：点击图片可以放大，如果是多张图片，实现滑动 html <div class="comment comment-img" @click="seeImg()" v-if="evaluation.evaluationImage" > <van-image v-for="(imageItem, index) in JSON.parse(evaluation.evaluationImage)" :key=
vant UI 轮播组件swiper 滑动时触发click点击事件
_NIXIAKF的博客
05-25 2681
vant UI 轮播组件swiper 滑动时触发click点击事件
Vant轮播加图片预览-解决轮播的滑动触发点击事件
IT_Dilraba_bin的博客
12-29 2614
Vant轮播组件加图片预览，解决轮播的滑动触发点击事件。
vue van-tabs组件切换tab时候，影响display:fixed属性导致降级问题解决
sinat_42888557的博客
04-20 1946
vue vant2 van-tabs组件切换tab时候，影响display:fixed属性导致降级问题解决 <template> <van-tabs v-model="active"> <van-tab title="标签 1">内容 1</van-tab> <van-tab title="标签 2">内容 2</van-tab> <van-tab title="标签 3">内容 3</van-ta
vue使用vant轮播图时，无法判断是点击还是滑动问题解决方案
wly_er的博客
07-24 3738
有时候，我们需要在轮播图中添加点击事件，但是，在手机端，如果直接使用click事件，点击和滑动都会触发click。 为了解决这个问题，这里了我使用了@touchstart、@touchmove、@touchend三个事件。用来判断是点击还是滑动操作。 附上代码： <van-swipe class="banner" :loop="true" :height="height" ...
Vue实现图片轮播组件思路及实例解析
10-15
当前Index}" @click="changeSlide(i)"></li> </ul> </div> </template>js:export default { data() { return { sliders: [ // 图片数据 { img: '图片1的URL' }, { img: '图片2的URL' }, { img: '图片3的URL' }, // ...
自己写的vue无限轮播插件
前端说
02-21 6331
思路： 要实现无限轮播，需要在轮播图前后各加一张图片，加在前面的是轮播图的最后一张图片（重复的），加在后面的是轮播图的第一张图片（重复的）。例： <div class="wrapper-content"> <img class="wrapper-content_img" alt="4" src="img/4.jpg"/> <img class="wra
利用swiper2实现轮播图两侧显示前后屏的虚影
sinat_38546399的博客
12-31 2016
效果图： var mySwiper = new Swiper('.swiper-container',{ pagination: '.pagination', paginationClickable: true, autoplay:4000, loop:true, loopedSlides :2, loopAdditionalSlides : 2, //loo...
Vue移动端开发解决300ms点击延迟—FastClick
01-20
一.FastClick 移动端设备浏览器会默认在用户点击屏幕大约延迟300ms后才会触发点击事件，这是为了检查用户是否执行的是双击事件。为了能够立即响应用户的点击事件，才有了FastClick。 二.用法 全局安装fastclick： npm i fastclick 也可使用淘宝镜像： cnpm i fastclick 三.Vue中引入及配置FastClick 引入： import FastClick from 'fastclick' 配置： if ('addEventListener' in document) { document.addEventListener('DOMCo
移动端页面滑动会触发点击事件问题
zgwnDong的博客
11-20 2783
在移动端时用了点击事件，但是在滑动页面时，总是会被触发。 解决方案是： 把click事件换成touchend事件 $("body").on("touchend",".todetail",function(){ }); 然后引入并调用以下函数 function stopTouchendPropagationAfterScroll(){ var locked = false; window.addEventListener('touchmove', function(ev){
【uniapp】swiper内的点击导致 animationfinish事件被触发问题
u010227042的博客
08-06 2642
最近使用swiper组件时，遇到的问题，点击swiper内任何地方animationfinish事件都会触发，导致写在animationfinish事件中的代码不断被执行，影响操作， 因为我的操作就是需要在current改变的时候执行，翻看文档uniapp文档链接后发现swiper有change事件（current改变的时候触发），所以我的解决办法是将原来在animationfinish中执行的代码转移到change事件中。解决 <view class="tab"> <u-tab..
vue框架vant组件中events的使用方法
mahoutouch的博客
11-01 1579
这里以vant中的轮播图组件为例 <template> <div id="app"> <van-swipe class="my-swipe" ref="box" @change="changeEvent" :autoplay="3000" indicator-color="white" :vertical="false" :height="200" :stop-propagation="true"> <van-swi..
vue篇（技术总结 持续更新）
程序员创业中
05-05 3071
20200121vue 报错：Cannot read property '_wrapper' of undefined 通常情况下是@click的方法没有在methods中定义，一个个去排查吧 20200117 el-select设置value为对象 普通的，如果直接传对象，会显示如下效果，解决办法：el-select加value-key属性唯一标识 20200109 el-table勾......
Vant 步进器 van-stepper 阻止事件冒泡
grootbaby
08-14 4221
一般情况下 Vue 阻止事件冒泡用 .stop 即可解决 Vue 阻止事件默认行为用.prevent 解决 今天这里是介绍Vant 框架里写购物车，需求是购物车中的商品点击也可以进入到商品详情，于是在 card 标签加了 click 事件，就导致点击步进器van-stepper增加减少也会触发 card 的 click ，用原生事件 event.stopPropagation()即可完美解决 <van-stepper v-model="val.quantity" ...
滑动删除与cell中的点击事件冲突
qq_25303213的博客
09-02 1377
滑动删除与cell中的点击事件冲突
【uniapp】swiper组件touch事件和click兼容问题
c347087870的博客
11-07 1204
touch事件和click兼容问题
移动端fastClick的原理解析
qq_41831345的博客
12-10 780
移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，我们需要对移动端的点击事件做下处理。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="...
vue3 封装vant popup
最新发布
01-22
假设在一个电商网站的商品详情页中有这样一个需求：用户点击查看大图预览时会触发图片轮播式的弹出层. 此处就可以借助之前提到过的 `CustomPopup` 完成快速搭建： ```html <!-- ProductDetailPage.vue --> ... ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值