H5移动页面的touch事件与点击穿透问题

先举一个例子：

    
    
    
    


    

    去百度

简介：上边例子中，a标签链接到百度，a标签上方漂浮这一个蒙层，js的功能是实现点击蒙层后蒙层消失。

效果：点击蒙层，蒙层消失；300毫秒后，下边的a标签的click事件被触发，网页跳转到百度，即发生了事件穿透。

把js代码换成以下写法：

效果：点击蒙层，蒙层消失，但存在300毫秒延迟。

解释：

一.click与300ms延迟
移动浏览器提供一个特殊的功能：双击（double tap）放大

300ms的延迟就来自这里，用户碰触页面之后，需要等待一段时间来判断是不是双击（double tap）动作，而不是立即响应单击（click），等待的这段时间大约是300ms。

移动事件提供了touchstart、touchmove、touchend却没有提供tap支持，主流框架（库）都是手动实现了自定义tap事件，以求消除300ms延迟，提高页面响应速度。对于简单的页面，可以把touchstart或者touchend当作tap来用，但存在一些问题，比如手指接触目标元素，按住不放，慢慢移出响应区域，会触发touchstart事件执行对应的事件处理器（本不应该触发），touchend事件也存在类似的问题。

此外，使用原生touch事件也存在点击穿透的问题，因为click是在touch系列事件发生后大约300ms才触发的，混用touch和click肯定会导致点透问题，下面详细介绍


二.点击穿透问题

①点击蒙层（mask），蒙层消失后发现触发了按钮下面元素的click事件，蒙层绑定的是touch事件，而按钮下面元素绑定的是click事件（a默认为click事件），touch事件触发之后，蒙层消失，300ms后这个点的click事件触发，事件的target自然就是蒙层下面的元素，蒙层此时已经消失。

②如果按钮下面恰好是一个有href属性的a标签，那么页面就会发生跳转，因为a标签跳转默认是click事件触发，所以原理和上面的完全相同。

三、解决方法
①只用touch：把页面内所有click全部换成touch事件（touchstart、’touchend’、’tap’），需要特别注意a标签，a标签的href也是click，需要去掉换成js控制的跳转，或者直接改成span + tap控制跳转。如果要求不高，不在乎滑走或者滑进来触发事件的话，span + touchend就可以了，毕竟tap需要引入第三方库

缺点：不利于seo（因为没有a标签，内链外链之类的也就没有了）

②只用click。缺点：会带来300ms延迟。

③使用fastclick消除300毫秒延迟，随后只用click。比较好用的解决方案，只是多加载了几K的资源。

④遮挡：给mask的消失做一个fade效果，类似jQuery里的fadeOut，并设置动画duration大于300ms，这样当延迟的 click 触发时，就不会“穿透”到下方的元素了。

注：代码中本人使用的是JQuery，如果是开发，推荐使用移动端的js库zepto.js，用法跟JQuery差异不大，touchstart请换成tap（相当于pc端的click），但依然会存在延迟，解决方法如上。

tap：原生的touch事件本身是没有tap的，js库里提供的tap事件都是模拟出来的，单次点击300ms内再次点击则判定为double tap。