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

问题背景:
移动端 滑动事件与点击事件冲突
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(),即可手动去触发这个点击事件。