移动端touch与click

前段时间做项目中发现了点透现象，所以上网找了些资料，纪录一下。

touch事件

touch是针对触屏手机上的触摸事件。
其中包括：touchstart,touchmove,touchend,touchcancel

• touchstart: 当手指触摸到屏幕会触发
• touchmove: 当手指在屏幕上移动时，会触发
• touchend: 当手指离开屏幕时，会触发

click

在手机WEB端，click会有 200~300 ms的延迟
在移动端，手指点击一个元素，会经过：touchstart --> touchmove -> touchend --》click

点透

点透现象出现的场景

当A/B两个层上下z轴重叠，上层的A点击后消失或移开，并且B元素本身有默认click事件或绑定了click事件。在这种情况下，点击A/B重叠的部分，就会出现点透的现象。

解决方案

引入fastclick.js

阻止默认事件

event.preventDefault();

延迟click事件

setTimeout(function(){
    //......
},320);