博客

问题背景：



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()，即可手动去触发这个点击事件。