移动端事件对象touches的误区
不想长篇大论，也是自己遗留下的一个错误的理解
在移动端触屏事件有四个
// 手势事件 touchstart //当手指接触屏幕时触发 touchmove //当已经接触屏幕的手指开始移动后触发 touchend //当手指离开屏幕时触发
当然还有个touchcancel事件，但是我测试后，并没发现有什么卵用
每个触摸事件对象中都包括了touches这个属性，用于描述前位于屏幕上的所有手指的一个列表
那么获取当前事件对象我们习惯性的使用 event = event.touches[0] ，我记得在很多年前事件对象必须在touches中获取才可以
在单指操作中，event.touches[0] 是没问题的，貌似正确的这个写法就一直遗留下来了
直到遇到了这样一个效果：模拟支付宝快捷支付的键盘~
移动端因为伪类:active失效的问题，我才用了JS动态处理active的效果
问题就出现了：多个手指同时操作，active乱套了
简单描述下问题：
1-9数字键盘
- 单指通过按下数字1，按住不松手，再单指按住数字2，按下并松手，此时触发了数字1
- 同时按下2个数字键，松手后2个touchend都丢失，不响应了
测试的结果：测试手机 iphone 6 plus 、 安卓酷派
先看单指操作，touchstart 与touchend 的处理，按下数字1后松手
[LOG] : start的手指数量: 1 [LOG] : start touches对象的textContent值 :1 [LOG] : 当前start手指对应的textContent值: 1 [LOG] : [LOG] : end的手指数量: 0 [LOG] : 当前end手指对应的textContent值: 1
观察：
touchstart ：
e.touches.length 的长度是1
touches列表中只有一个 事件对象，并且对应的值是1
直接通过e.traget.textContent 获取的值也是1
touchend ：
e.touches.length 的长度是0
touches列表因为没有长度，因为没有值
直接通过e.traget.textContent 获取的值也是1
三根手指操作：touchstart 与touchend 的处理
按下的顺序： 数字键 1,2,3
松手的顺序： 数字键 3,2,1，
touchstart 数字键 1,2,3
[LOG] : start的手指数量: 1 [LOG] : start touches对象的textContent值 :1 [LOG] : 当前start手指对应的textContent值: 1 [LOG] : [LOG] : start的手指数量: 2 [LOG] : start touches对象的textContent值 :1 [LOG] : start touches对象的textContent值 :2 [LOG] : 当前start手指对应的textContent值: 2 [LOG] : [LOG] : start的手指数量: 3 [LOG] : start touches对象的textContent值 :1 [LOG] : start touches对象的textContent值 :2 [LOG] : start touches对象的textContent值 :3 [LOG] : 当前start手指对应的textContent值: 3
e.touches.length 的长度是随着手指的触点增加而递增
e.touches列表中保留了所有触发手势的事件对象的总数
直接通过e.traget.textContent 获取的是当前的元素对象的值
touchend 数字键 3,2,1，
[LOG] : end的手指数量: 2 [LOG] : end touches对象的textContent值 :1 [LOG] : end touches对象的textContent值 :2 [LOG] : 当前end手指对应的textContent值: 3 [LOG] : [LOG] : end的手指数量: 1 [LOG] : end touches对象的textContent值 :1 [LOG] : 当前end手指对应的textContent值: 2 [LOG] : [LOG] : end的手指数量: 0 [LOG] : 当前end手指对应的textContent值: 1
e.touches.length 的长度是随着手指的触发减少
touches列表中保留了所有触发手势的事件对象的总数
直接通过e.traget.textContent 获取的是当前的元素对象的值
总结：
e.touches确实能保留所有触发点的事件对象
touchend 事件中得到的是一个touches的最终值，也就是delete后的列表，所以获取到的touches.length已经减少了，相当于--touches的处理后结果
touches[0] 并不能获取到当前的指向的手势，因为是一个列表，不能确定是哪个一个引用
最终还是通过e.traget取值就可以了。。。。。