移动端网页特效

触屏事件touch

touch对象代表一个触摸点，触屏事件可相应用户对屏幕或者触控板的操作。

1. 常见的touch事件

• touchstart - 手指触摸到一个DOM元素时触发
• touchmove - 手指在一个DOM元素上滑动时触发
• touchend - 手指从一个DOM元素上移开时触发

2. 触摸事件对象

TouchEvent是一类描述手指在触摸平面状态变化的事件。常见的触摸事件对象列表

• touches： 正在触摸屏幕的所有手指的列表
• targetTouches：正在触摸当前DOM元素上的手指列表
• changedTouches：手指状态发生改变的列表（从有到无/ 由无到有）

3. 移动端拖动元素

思想：

step1： 触摸元素touchstart，计算手指的初始坐标，同时获得盒子原来的位置。

step2： 移动手指touchmove，计算手指的滑动距离，移动盒子。

step3： 离开手指touchend。