移动端事件对象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取值就可以了。。。。。

转载于:https://www.cnblogs.com/aaronjs/p/4778020.html

移动端事件对象touches的误区相关推荐

【移动端】事件（touchstart、touchmove、touchend、touchcancel）跟事件对象属性（changedTouches、targetTouches、touches）
文章目录事件事件类型事件绑定事件对象属性在touchstart 事件中在 touchmove 事件中在 touchend 事件中事件事件类型 touchstart 元素上触摸开始时触 ...
web api、获取DOM元素的方式、事件理解、click事件在移动端300ms延时、事件对象、事件委托、常见事件类型
web api: API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力 ...
vue-cli、脚手架创建、eslint、alias别名配置、proxy代理配置、axios、scoped、穿透、媒体查询、12栅格、动态rem、1px边框、移动端事件、300ms延迟问题（六）
vue-cli的使用现在使用前端工程化开发项目是主流的趋势,也就是说,我们需要使用一些工具来搭建vue的开发环境.一般情况下我们都会选择使用webpack进行项目的构建,在这里我们直接使用vue官方 ...
小程序 | 小程序中常用的事件 + 事件对象的属性列表 +小程序事件传参 + 小程序全局配置 + 小程序页面配置 + 小程序发起网络数据请求
文章目录一.WXML 模板语法数据绑定事件绑定 ⭐小程序中常用的事件 ⭐事件对象的属性列表 target 和 currentTarget 的区别 bindtap 的语法格式在事件处理函数中为 ...
移动端事件（touchstart+touchmove+touchend）
移动端事件有哪些: 触摸事件手势事件传感器事件 (后面两个兼容性不怎么样,因此重点就是触摸事件) 触摸事件: touch 事件 pointer 事件 (PC端可能会使用jQuery做动画,移动端一 ...
移动端事件touchstart touchmove touchend 动画事件过渡事件
在移动端新增了touch事件,因为手指的行为叫做"触摸", 鼠标的行为叫做"点击" 但是它仍然支持点击事件,有300ms的延迟,检测是否双击移动端的三个事件 ...
html click事件参数,vue 实现click同时传入事件对象和自定义参数
这篇文章主要介绍了vue 实现click同时传入事件对象和自定义参数,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧仅仅传入自定义参数 HTML ddddd JS代码 new Vue ...
jQuery学习笔记系列（三）——事件注册、事件处理、事件对象、拷贝对象、多库共存、jQuery插件、toDoList综合案例
day03 - jQuery 学习目标: 能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件能够说出 jQuery ...
史上最全的常用事件：移动端事件及PC端：鼠标/键盘/表单事件
PC端事件鼠标事件: onclick点击 onmouseover鼠标移入 onmouseout鼠标移出 onmousedown鼠标按下 onmouseup鼠标抬起 onmousemove鼠标移动 o ...

移动端事件对象touches的误区

移动端事件对象touches的误区相关推荐

最新文章

热门文章