hammer.js解决移动端点击穿透(幽灵click问题)

一.click与300ms延迟

  hammer.js绑定tap事件过后会在触发之后再次触发一个点击事件

在我们给遮罩绑定tap事件的时候如果遮罩下面恰好是一个a标签那么就会出现点击遮罩页面跳转的情况

二.点击穿透问题

点击穿透现象有三种

    *点击穿透问题：点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件
蒙层关闭按钮绑定的是touch事件，而按钮下边元素绑定的是click事件，touch事件触发之后，蒙层消失了，300ms后这个点的click事件fire，event的target自然就是按钮下面的元素，因为按钮跟蒙层一起消息了。

    *跨页面点击穿透事件：如果按钮下面恰好是一个href属性的a标签，那么页面就会法神跳转，因为a标签跳转默认是click事件触发，所以原理和上面的完全相同

    *另一种跨页面点击穿透问题：这次没有mask了，直接点击页内按钮跳转至新页，然后发现新页面中对应位置元素的click事件被触发

和蒙层的道理一样，js控制页面跳转的逻辑如果是绑定在touch事件上的，而且新页面中对应位置的元素绑定的是click事件，而且页面在300ms内完成了跳转，三个条件同时满足，就出现这种情况了

非要细分的话还有第四种，不过概率很低，就是新页面中对应位置元素恰好是a标签，然后就发生连续跳转了。。。诸如此类的，都是点击穿透问题

三.为什么会出现点透

click延迟、延迟、还是延迟

在移动端不使用click而用touch事件代替触摸是因为click事件有着明显的延迟，具体touchstart与click的区别如下：

    *touchstart：在这个DOM（或者冒泡到这个DOM）上手指触摸开始即能立即出发

    *click：在这个DOM（或者冒泡这个DOM）上手指触摸开始，且手指未在屏幕上移动（某些浏览器允许移动一个非常小的位移值），且在这个DOM元素上手指离开屏幕，且触摸和离开屏幕之间的间隔时间较短（某些浏览器不检测间隔时间，也会触发click）才能触发

也就是说，事件的触发事件按照由早到晚排列为：touchstart早于touchend早于click。亦即click的触发是有延迟的，这个时间大概在300ms左右（即使给元素绑定的是touch事件，touchstart=>touchend=>click，click事件依然会被触发）

由于我们在touchstart阶段就已经隐藏了罩层A，当click被触发的时候，能够被点击的元素则是罩层下面的B元素绑定的事件，根据click事件的触发规则：

只有在被触发的时候，当前有click事件的元素显示，且在面朝用户的最前端时，才出发click事件。

由于B绑定了click事件（或者B本身默认存在click事件），所以B的click事件被触发，产生了点透的情况。

四.解决方案

最开始我是在hammer绑定的tap事件里面调用阻止浏览器默认行为和事件的相关方法 然后再次测试发现没有效果

然后我就思考了一下试了一下给我绑定hammerJs的节点再绑定一个touchend事件经过测试发现完美解决了那个问题

值得注意的是一定要给addEventListener事件的第三个参数添加为false 并且 touchend事件一定要在hammerJs绑定的tap事件之后添加否则无法解决tap点击穿透的问题hammer的其他事件没有进行测试不知道会不会有相同的问题