浅谈移动端点透问题

在进行移动端开发的时候，我们或多或少会听说过点透现象，那么这个到底是一个什么样的问题呢，以及应该如何去解决，本文将做一个简单的介绍：

先讲问题：

例如说我们移动端有一个页面，进行了某些操作后，页面会出现一个弹窗，弹窗的确认按钮使用了touchend事件作为事件绑定。当点击了弹窗的确认按钮后，弹窗消失，然后莫名其妙地就触发了位于按钮下发的一些click事件。

其实这里是有不少的限制条件的，但是就总是会被我们碰到，没碰到过的话可以自己尝试复现一下。

原因分析：

1. 移动端上click事件有300ms延迟（主要是浏览器的用户行为机制引起的，详细可以找找参考资料）

2. 事件触发顺序为touchstart->touchmove->touchend->click

因此在touchend将弹窗关闭后，其实click事件还没有真正执行，等click事件执行的时候，弹窗已经关闭，click就会直接在最后点击的那个地方产生，自然就会触发到下面的click事件了，例如说信息页面的某些功能块。这样的一个过程就会产生我们所说的点透事件。

解决办法：

既然知道了原因所在，那我们解决问题就来的方便多了。

1. 手动取消默认事件，避免浏览器在执行了touch事件之后再去执行click，我们一般可以通过event.preventDefault()方法解决

2. 项目中尽量不要将click与touch事件混用，可以使用hammer等手势库进行手势事件的统一

3. 使用fastClick取消click事件的默认延迟，也有其他方案如设置浏览器meta属性来禁止浏览器的用户行为