移动端 滑动事件与点击事件冲突

问题背景:
图片
vue中的日历通过滑动可进行月、周视图切换。监听滑动事件,根据上滑、下滑、左滑、右滑动来进行对应的切换处理。开发后发现,移动端默认滑动事件会和我们自己自定义的touch有所冲突,体验非常不好。所以要使用e.preventDefault()阻止事件默认行为,结果满足需求。
后继续开发日历具有点击功能,发现在ios中完全能够点击,而在android系统中则出现了click事件触发的问题。查询文章,发现问题是出现在e.preventDefault()上,由于我们在自定义touch里面的touchstart中阻止了默认事件,导致问题的出现。
解决方式有两种:
1、元素定位(不太建议使用)
e.preventDefault()的添加主要是为了防止事件的默认行为和我们的touch有冲突,影响交互体验。我们可以不使用e.preventDefault(),直接让滑动区域的元素进行fixed或者是absolute定位,即可解决问题
2、手动触发被阻止的事件
监听用户touch事件,在TouchEvent中找到changedTouches[0],再找到target可以看到具体点击了哪个元素,如果这个元素或者是父级元素绑定了click事件,只需要
e.changedTouches[0].target.click(),即可手动去触发这个点击事件。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值