Vant: swipe组件滑动时会触发item内的点击事件

Created on 29 May 2018 · 19Comments · Source: youzan/vant

What is the current behavior?
开启swipe 手势滑动时，滑动会同时触发内部自定义的点击事件

    <van-swipe v-if="selected===0" :autoplay="3000">
               <van-swipe-item v-for="(item,index) in bannerList" :key="index">
                            <img :src="item.picUrl" @click="goAdvert(item.type, item.skipName, item.id, item.shopId)" :alt="item.name">
                        </van-swipe-item>
               </van-swipe>

What is the expected behavior?
手势滑动时，不应同时触发内部点击

Which versions of Vant and Vue, and which browser / OS are affected by this issue? Did this work in previous versions of Vant?
"vant": "^1.1.3",
"vue": "^2.5.13",

Source

Saber-tgb

Most helpful comment

qianzhaoy on 26 Nov 2018

🎉4 👍4 ❤1

All 19 comments

遇到了同样的问题请问是怎么解决的？？？

xiaobingMa on 20 Jun 2018

我的项目是由于使用了better-scroll和vant的swipe造成了冲突
解决方法:放弃使用vant的swipe组件，用better-scroll自己写一个滚动组件

Saber-tgb on 20 Jun 2018

我发现了是因为我用了fastclick插件的问题，不知道该如何解决，郁闷

xiaobingMa on 21 Jun 2018

解决了

xiaobingMa on 21 Jun 2018

怎么解决的 @xiaobingMa

xiaojia21190 on 27 Jul 2018

@xiaobingMa 请问上如何解决的

youdianfan on 14 Sep 2018

fastclick

请问是如何解决的呢

wuxn on 26 Nov 2018

qianzhaoy on 26 Nov 2018

🎉4 👍4 ❤1

同遇到这个问题

SunXinFei on 23 Jan 2019

怎么解决 @有赞官方

iwen-pengh on 16 Feb 2019

同问，我改用了这个插件 vue-concise-slider

huozhenwei on 13 May 2019

@Saber-tgb 我用另一个轮播组件，也遇到了同样的问题。首先想到的是touch事件禁止冒泡，禁止冒泡后可以解决滑动时触发的点击事件，但是轮播图本身的点击事件捕获不到了。。。。
解决方法是绑定俩个事件：
handleTouchMove(e) {
e.stopPropagation()
this.moved = true
}
handleTouchEnd(e) {
// 滑动时禁止冒泡，正常点击不会禁止
if (this.moved) {
this.moved = false
e.stopPropagation()
}
}

webdazhuo on 23 May 2019

@zhuogx 我借用你的方法会将swipe-item的滚动都禁止了，然后我通过实现一个标志位可以解决
handleTouchMove() { this.moved = true; },
clickNoteItem() { if (this.moved === true) { this.moved = false; return; } },
只需要监听touchmove 和 click 就可以了

jakietwo on 3 Jun 2019

👍2

@jakietwo 这种方式在ios端会有问题，滑动后需要点击两下才能响应

jingguangyan on 27 Jul 2019

@Saber-tgb 请问怎么解决的

GHUserZ on 27 Aug 2019

我给Table组件加一个 :key="show"， show 就是控制Modal显示或隐藏的value

------------------ 原始邮件 ------------------
发件人: "ZhaoXiaoLin"notifications@github.com;
发送时间: 2019年8月27日(星期二) 上午10:06
收件人: "youzan/vant"vant@noreply.github.com;
抄送: "梧桐"392151426@qq.com; "Comment"comment@noreply.github.com;
主题: Re: [youzan/vant] swipe组件滑动时会触发item内的点击事件 (#1186)

@Saber-tgb 请问怎么解决的

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

jingguangyan on 17 Sep 2019

为什么在touchmove时，用的是event.stopPropagation，而不是event.preventDefault();，导致拖动的过程中被触发click事件@chenjiahan