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

问题背景:
图片 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(),即可手动去触发这个点击事件。