【移动端】touch事件及穿透事件
touch 事件的来历
2007 苹果推出iphone，浏览器网页在iphone上显示时字体特别小，根本看不清楚
苹果的解决方案：
方案一：双指进行缩放
方案二：在屏幕上双击进行放大（单击300ms后，再单击才算双击），造成了，移动端点击事件，300ms 延迟的问题
解决方案，就是使用touch事件来替代
移动端新增touch事件 --- 只能使用现代事件进行添加
touchstart: 触摸开始
touchmove: 触摸移动
touchend: 触摸结束
touchcancel：touch 取消，如来电等
【扩展】：移动端touch、click、tap的区别
http://t.zoukankan.com/luo1240465012-p-9450627.html
2. 添加touch 事件
代码如下：
3. touch对象
注：touchstart 触摸开始后，不管touchmove , touchend 是否移出开始触摸的元素，e.target都是开始时触摸的元素dom.
e.touches : 在手机上的所有触点信息
e.changeTouches: 跟当前事件相关的所有触点信息
e.targetTouches：作用在当前元素上的所有触点信息
【扩展】touch事件中的touches、targetTouches和changedTouches详解
https://www.cnblogs.com/mengff/p/6005516.html
4. 封装 touch 事件
事件测试：
5. touch 事件的穿透
因click是在touch系列事件发生后300ms才触发的，混用click和touch肯定会导致穿透问题.
点击穿透现象的情况：
1) 蒙层问题
蒙层的关闭按钮绑定的是touch事件，而按钮下面元素绑定的是click事件，touch事件触发后，蒙层消失，300ms后这个点的click事件触发。
2) 跨页面点击穿透问题
如果按钮下面恰好是一个href属性的a标签，那么页面就会发生跳转（a标签跳转默认是click事件触发的）
解决问题：
方法一：自己封装tap事件不会有穿透问题，因为阻止了默认行为 e.preventDefault();
方法二：吃掉touch之后的click, 使用计时器，让touch后延迟350ms再隐藏蒙层
方法三：使用fastclick.js；可以直接写click事件
还有，其它方法，就不阐述了
苟有恒 , 何必三更眠五更起
关注我，一起学习吧
