移动端点透现象及解决办法

移动端 touch 事件

　　移动端在 touch 上一共有4个事件，touchstart、touchmove、touchend、touchcancel， touchcancel, 一般来说，它们执行的顺序为 touchstart -> touchmove -> touchend -> touchcancel .

　　当用户在点击屏幕的时候，系统会触发 touch 事件和 click 事件，touch 事件优先处理，touch 事件经过捕获，目标，冒泡一系列流程处理完成后，才回去触发 click 事件。也就是说 click 的触发是有延迟的，这个时间大概在 300ms 左右。

点透现象

　　点透发生的条件：

1. A 和 B不是后代继承关系(如果是后代继承关系的话，就直接是冒泡子类的话题了)
2. A发生 touch， A touch 后立即消失， B事件绑定 click
3. A z-index大于B，即 A 显示在 B 浮层之上

　　点透发生的原因：当手指点击屏幕，系统生成两个事件 touch 和 click 。touch 先执行，touch 执行完成后 A 消失，然后要执行 click 的时候，就会发现用户点击的是 B，所以就执行了B的 click。


　　点透现象解决办法：

1. 阻止默认事件，在 touch 时间的某个阶段执行 event.preventDefault() ，去取消系统生成的 click 事件，一半在 touchend 中执行
2. 要消失的元素延时300ms，然后在消失