移动端事件对象touches的误区

不想长篇大论，也是本身遗留下的一个错误的理解

在移动端触屏事件有四个

// 手势事件
touchstart  //当手指接触屏幕时触发
touchmove   //当已经接触屏幕的手指开始移动后触发
touchend    //当手指离开屏幕时触发

固然还有个touchcancel事件，可是我测试后，并没发现有什么卵用

每一个触摸事件对象中都包括了touches这个属性，用于描述前位于屏幕上的全部手指的一个列表

那么获取当前事件对象咱们习惯性的使用  event = event.touches[0] ，我记得在不少年前事件对象必须在touches中获取才能够

在单指操做中，event.touches[0] 是没问题的，貌似正确的这个写法就一直遗留下来了

 

直到遇到了这样一个效果：模拟支付宝快捷支付的键盘~

移动端由于伪类:active失效的问题，我才用了JS动态处理active的效果

问题就出现了：多个手指同时操做，active乱套了

简单描述下问题：

1-9数字键盘

1. 单指经过按下数字1，按住不松手，再单指按住数字2，按下并松手，此时触发了数字1
2. 同时按下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取值就能够了。。。。。