vue + fastclick + loadmore(mint-ui)下拉触发元素的点击事件问题

最近在使用 vue + mint-ui + fastclick 时,碰到了一个大问题,在一度搜索之后都说改源码,在改源码也无果后,自己想除了一个解决方法,当然是在不改源码的基础上。

问题

在使用 mint-ui 下的 loadMore 组件时,出现了一个了问题:在iOS使用 fastclick 的情况下,下拉刷新时会触发子元素的点击事件,而事件其实是不应该处理的,在看源码+搜索之后,确定了问题出现的原因:在下拉的时候触发了 'touch' 事件,而 fastclick 将 'touch' 处理成了 'click' 事件,导致的。

处理

因为滚动触发了 touch 事件,而 fastclick 会将 touch 事件转换为 click ,所以出现了滚动时触发了元素的 touch 事件,转而触发了 click ,而想要触发一个元素的正真 click 事件,给元素加上class="needsclick" 就可以了,所以有下面的解决思路: 在会触发点击的元素内盖上一层元素,点击事件在这个盖的元素上处理,然后给这个元素加上 class="needsclick" (只要元素加上这个 class 这个元素上的点击事件就是正常的 click 也就不会因为 touch 事件而触发 click 处理函数了)

dom 结构大概是这样

div.box1  
    div.needsclick @click=‘handleClick’
    div.content

box1 为最外层元素 position: relative; needsclick 为覆盖元素 position: absolute; 大小与 box1 一致完全的覆盖在 content 元素上 content 为内容

写在最后:在 box1 上加 needsclick 是不起作用的,因为当滑动的时候我们不是在 box1 上触发了 touch 而是它的子元素,所以在 box1 上监听 click 其实处理的它子元素冒泡上来的 touch 事件(而 touch 事件已经被处理成了 click ),即使 box1 上触发的是真正的 click 事件,所以才有了覆盖的那一层,当然我们可以给每个 box1 下的内容都加上 class="needsclick" 但这个体验感觉不是很好,应该也是行的通的,但一想到 box1 下面的元素之多(而且基本上仅仅是为了显示),我想想还是算了。

所以才有了这个方案:所有的点击都触发在覆盖元素的那一层,而 content 元素永远都点击不到,因为覆盖元素的点击事件是真正的 cilck 所以也就不存在了因为 touch 事件而触发的 click 了,问题算是半完美解决,因为这会导致 content 中的内容不能点,这算是一个小 bug ,但完美的方法也说了就是给每个 box1 中的元素都加上 class="needsclick" 根据需求加吧。