移动端-触屏事件

事件类型

移动设备上无法使用鼠标，当手指触碰屏幕时会触发 click、mousedown、mouseup 事件，同时还有一些新的事件：

1. touchstart 手指触摸屏幕时触发
2. touchmove 手指在屏幕上移动时触发
3. touchend 手指离开屏幕时触发

TouchEvent

1. touches 位于屏幕上的所有手指的列表
2. targetTouches 位于该元素上的所有手指的列表
3. changedTouches touchstart时包含刚与触摸屏接触的触点，touchend时包含离开触摸屏的触点

Touch

1. clientX/Y 手指相对于layout viewport的水平/垂直像素距离
2. pageX/Y 手指相对于layout viewport的水平/垂直像素距离（含滚动）
3. screenX/Y 手指相对于layout viewport的水平/垂直像素距离（含滚动）
4. target 手指最初与屏幕接触时的元素

当设置

<meta name="viewport" content="width=device-width, initial-scale=1">，这时这三对坐标值是完全一样的。

click延时

早期移动设备浏览器网页时内容非常小，为了增强用户体验，苹果公司专门为移动设备设计了双击放大的功能，确保用户可以非常方便的放大网页内容，但是当用户单击一个按钮时，移动设备会延时（约300ms）执行，判断用单是否要双击。由于延时的存在导致用户体下降，为了尽快响应用户点击，一般使用触屏事件来解决。

手势封装

1. tap检测接触和离开屏幕的距离来实现
2. drag跟踪手指移动位置，进而设置元素定位坐标
3. swipe 判断手指滑动的方向