DOM0 级事件模型（模拟器不支持）
DOM0 级事件绑定 在 移动端有 300ms 的延迟
ontouchstart
手指按下事件
ontouchmove
手指移动事件
pntouchend
手指离开事件
DOM2 级事件模型（项目）
- 手指按下事件
ele.addEventListener("touchstart", func1, false);
- 手指移动事件
ele.addEventListener("touchmove", func2, false);
- TouchEvent
手指列表：（都是 伪数组）
- changedTouches 目标元素 目标事件 上的手指列表0
- e.changedTouches[0].clientX;
- e.changedTouches[0].clientY;
- targetTouches 目标元素上的手指列表
- touches 屏幕上的手指列表
- 手指离开事件
ele.addEventListener("touchend", func3, false);
禁止浏览器默认行为（长按复制文本）
// 手机上你滑动的时候他本身就有个默认的滚屏
// 因此如果你要操作操作你个dom元素，用touchmove事件，这其实也是滑动
// 原本你的效果是要在dom上滑动然后产生相应的效果，这个时候你肯定不希望手机上的浏览器屏幕滚动
// 所以你应该把它默认的滚动给禁止了。这样才会有好的用户体验
document.addEventListener("touchstart", function(e){
e.preventDefault(); /* DOM2 清除默认行为 */
}, false);
准备工作
1. meta 标签（苹果发明的，PC 浏览器不支持）
<meta name="viewport" content="width=device-width",initial-scale=1.0, user-scalable=no /> 完美视口
如果 页面存在一个太大的元素，只用了 width=device-width initial-scale=1.0 的一个，一些浏览器会扩展布局视口的宽度来容纳此元素
如果 width=device-width initial-scale=1.0 都写了，则大部分的浏览器不会改变布局视口
initial-scale 是系统初始缩放比例，随着 视觉视口 改变而改变。参照理想视口 375
user-scalable 是否允许用户进行缩放 默认允许
minimum-scale 允许缩放的最小比例 看公司规定 大多数 1
maximumscale 运算缩放的最大比例 看公司规定 大多数 1
target-desitydpi 基本不用，因为 webkit 内核不支持了
2. 清除默认样式
3. 清除系统滚动条
4. 取消默认行为
5. 适配
6. 点透处理