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

在移动端触屏事件有四个

// 手势事件
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取值就可以了。。。。。

移动端事件对象touches的误区的更多相关文章

  1. Android系统下用js自定义gesture事件(仿ios实现移动端事件一致)

    .katex { display: inline-block; text-align: initial; } .katex { font-family: Consolas, Inconsolata, ...

  2. 移动端事件(touchstart、touchmove、touchend)--移动端开发整理笔记(三)

    移动端事件 三个事件 touchstart 手指触摸 相当于PC端 mousedown touchend 手指抬起 相当于PC端 mouseup touchmove 手指滑动 相当于PC端 mousm ...

  3. 第9章 用内核对象进行线程同步(1)_事件对象(Event)

    9.1 等待函数 (1)WaitForSingleObject(hObject,dwMilliseonds); ①dwMilliseconds为INFINITE时表示无限等待 ②dwMilliseco ...

  4. javaScript事件(三)事件对象

    一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 1.认识事件对象 事 ...

  5. 服务端事件EventSource揭秘

    服务端推 服务端推,指的是由服务器主动的向客户端发送消息(响应).在应用层的HTTP协议实现中,"请求-响应"是一个round trip,它的起点来自客户端,因此在应用层之上无法实 ...

  6. jQuery基础(4)- 位置信息、事件流、事件对象、事件代理、jquery事件

    一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...

  7. web前端 在react中使用移动端事件,学习笔记

    一  移动端事件的使用:           onTouchStartCapture        onTouchStart           onTouchMoveCapture       on ...

  8. JavaScript权威设计--事件冒泡,捕获,事件句柄,事件源,事件对象(简要学习笔记十八)

    1.事件冒泡与事件捕获 2.事件与事件句柄   3.事件委托:利用事件的冒泡技术.子元素的事件最终会冒泡到父元素直到跟节点.事件监听会分析从子元素冒泡上来的事件. 事件委托的好处:     1.每个函 ...

  9. JS—事件对象

    在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. 举例鼠标操作导致的事件对象中,会包含鼠标位 ...

随机推荐

  1. .NET Core中的认证管理解析

    .NET Core中的认证管理解析 0x00 问题来源 在新建.NET Core的Web项目时选择“使用个人用户账户”就可以创建一个带有用户和权限管理的项目,已经准备好了用户注册.登录等很多页面,也可 ...

  2. 关于ubuntu实机与虚机互相copy

    我的开发环境是在ubuntu上的,但是ubuntu上没有官方支持的QQ,有些不太方便,所以在上面虚了一个Win7(先是win10,但是win10最新版本太坑了,不说了),不过经常会出现复制文件,或者文 ...

  3. C++中的事件分发

    本文意在展现一个C++实现的通用事件分发系统,能够灵活的处理各种事件.对于事件处理函数的注册,希望既能注册到普通函数,注册到事件处理类,也能注册到任意类的成员函数.这样在游戏客户端的逻辑处理中,可以非 ...

  4. 随手记_C#验证码

    前言 最近在网上偶然看见一个验证码,觉得很有意思,于是搜了下,是使用第三方实现的,先看效果: 总体来说效果还是可以的,官方提供的SDK也比较详细,可配置性很高.在这里在简单啰嗦几句使用方式: 使用步骤 ...

  5. Xamarin+Prism开发详解五:页面布局基础知识

    说实在的研究Xamarin到现在,自己就没设计出一款好的UI,基本都在研究后台逻辑之类的!作为Xamarin爱好者,一些简单的页面布局知识还是必备的. 布局常见标签: StackLayout Abso ...

  6. mount报错: you must specify the filesystem type

    在linux mount /dev/vdb 到 /home 分区时报错: # mount /dev/vdb /homemount: you must specify the filesystem ty ...

  7. Mybatis批量删除

    <delete id="deleteByStandardIds"> delete from t_standard_catalog where standard_id i ...

  8. XAMARIN.ANDROID SIGNALR 实时消息接收发送示例

    SignalR 是一个开发实时 Web 应用的 .NET 类库,使用 SignalR 可以很容易的构建基于 ASP.NET 的实时 Web 应用.SignalR 支持多种服务器和客户端,可以 Host ...

  9. vim安装中文帮助手册

    安装方法:   在下面的网站下载中文帮助的文件包:$wget http://nchc.dl.sourceforge.net/sourceforge/vimcdoc/vimcdoc-1.5.0.tar. ...

  10. Firebug中调试中的js脚本中中文内容显示为乱码

    Firebug中调试中的js脚本中中文内容显示为乱码 设置 页面 UFT-8 编码没用, 解决方法:点击 "Firebug"工具栏 中的"选项"---" ...