移动端事件对象touches的误区

简介:

不想长篇大论,也是自己遗留下的一个错误的理解

在移动端触屏事件有四个

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

当然还有个touchcancel事件,但是我测试后,并没发现有什么卵用

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

那么获取当前事件对象我们习惯性的使用  event = event.touches[0] ,我记得在很多年前事件对象必须在touches中获取才可以

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

 

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

image

移动端因为伪类: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取值就可以了。。。。。


本文转自艾伦 Aaron博客园博客,原文链接:http://www.cnblogs.com/aaronjs/p/4778020.html,如需转载请自行联系原作者

相关文章
|
12天前
|
存储 前端开发 JavaScript
【亮剑】在Web开发中,滚动事件(onScroll)是一个常见且强大的交互手段。
【4月更文挑战第30天】在React中,利用`onScroll`事件可实现无限滚动、动态加载和视差效果。通过`componentDidMount`和`componentWillUnmount`(类组件)或`useEffect`(函数组件)添加/移除滚动监听器。为了优化性能,需注意节流、防抖、虚拟滚动和避免同步计算。实战案例展示了如何结合Intersection Observer实现无限滚动列表,当最后一个帖子进入视口时加载更多数据。关注性能,确保应用流畅。
|
3月前
|
前端开发 算法 UED
提升网页交互体验的秘密武器——防抖和节流
提升网页交互体验的秘密武器——防抖和节流
26 0
|
5月前
|
JavaScript 定位技术
部分移动端独有的JS事件
部分移动端独有的JS事件
38 0
|
5月前
|
XML Java Android开发
Android App开发触摸事件中手势事件Event的分发流程讲解与实战(附源码 简单易懂)
Android App开发触摸事件中手势事件Event的分发流程讲解与实战(附源码 简单易懂)
49 0
|
7月前
|
Web App开发 JavaScript 前端开发
带你读《现代Javascript高级教程》三十、MutationObserver:监测DOM变化的强大工具(3)
带你读《现代Javascript高级教程》三十、MutationObserver:监测DOM变化的强大工具(3)
|
7月前
|
JavaScript 前端开发
带你读《现代Javascript高级教程》三十、MutationObserver:监测DOM变化的强大工具(2)
带你读《现代Javascript高级教程》三十、MutationObserver:监测DOM变化的强大工具(2)
|
7月前
|
Web App开发 JavaScript 前端开发
带你读《现代Javascript高级教程》三十、MutationObserver:监测DOM变化的强大工具(1)
带你读《现代Javascript高级教程》三十、MutationObserver:监测DOM变化的强大工具(1)
|
JavaScript 前端开发
史上最详细的DOM事件之框架事件
史上最详细的DOM事件之框架事件 上篇博客讲了DOM的拖动事件,这篇博客我们来讲一讲DOM的媒体事件。 HTML代码: <img src="../../CSS/0421/car.gif" alt=""> 1 JS代码: var oImg=document.getElementsByTagName("img")[0]; // 属性 描述 DOM // onload 一张页面或一幅图像完成加载。 // window.onloda=function(){ // } oImg.onload=function(ev)
|
移动开发 JavaScript Android开发