touch事件中的touches、targetTouches和changedTouches详解

摘要:
当两个手指触摸相同元素时,targetTouches和touches的值相同,否则targetTouches只有一个值。changedTouches此时只有一个值,为第二个手指的触摸点,因为第二个手指是引发事件的原因3.用两个手指同时接触屏幕,此时changedTouches有两个值,每一个手指的触摸点都有一个值4.手指滑动时,三个值都会发生变化5.一个手指离开屏幕,touches和targetTouches中对应的元素会同时移除,而changedTouches仍然会存在元素。

touches: 当前屏幕上所有触摸点的列表;

targetTouches: 当前对象上所有触摸点的列表;

changedTouches: 涉及当前(引发)事件的触摸点的列表

通过一个例子来区分一下触摸事件中的这三个属性:

1. 用一个手指接触屏幕,触发事件,此时这三个属性有相同的值。

2. 用第二个手指接触屏幕,此时,touches有两个元素,每个手指触摸点为一个值。当两个手指触摸相同元素时,
targetTouches和touches的值相同,否则targetTouches 只有一个值。changedTouches此时只有一个值,
为第二个手指的触摸点,因为第二个手指是引发事件的原因

3. 用两个手指同时接触屏幕,此时changedTouches有两个值,每一个手指的触摸点都有一个值

4. 手指滑动时,三个值都会发生变化

5. 一个手指离开屏幕,touches和targetTouches中对应的元素会同时移除,而changedTouches仍然会存在元素。

6. 手指都离开屏幕之后,touches和targetTouches中将不会再有值,changedTouches还会有一个值,
此值为最后一个离开屏幕的手指的接触点。

2. 触点坐标选取

touchstart和touchmove使用:e.targetTouches[0].pageX 或 (jquery)e.originalEvent.targetTouches[0].pageX

touchend使用:e.changedTouches[0].pageX 或 (jquery)e.originalEvent.changedTouches[0].pageX

3.touchmove事件对象的获取

想要在touchmove:function(e,参数一)加一个参数,结果直接使用e.preventDefault()就会 e 报错,处理方法为使用arguments[0]获取event参数
touchmove:function(e,参数一){
var e=arguments[0]
e.preventDefault()
}

出处:http://blog.sina.com.cn/s/blog_468530a60102wzkw.html

免责声明:文章转载自《touch事件中的touches、targetTouches和changedTouches详解》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Ubuntu 搭建简单的git server关于初学者上传文件到github的方法下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

mysql状态查看 QPS/TPS/缓存命中率查看

showglobalstatusslike'Com_ commit';showstatslike“无缓冲池读取%”;Thread_cache_Hits=(1-Thread_created/connections)*100%(8)锁定状态mysql>showstatslike“Binlog_缓存%”;...

ArcGIS Server服务状态正在停止。。。问题BUG解决

1、 ArcGISServer服务器存在服务问题:ArcGISServerManager的所有服务都显示为“正在停止…”。N个解决方案1)港口占用问题。端口4000-4002已被其他程序占用,导致服务无法正常启动。您可以通过CMD找到相关PID占用的端口,停止它,然后启动GIS服务。您也可以在安装目录中将其手动更改为D:ProgramFiles ArcGIS...

redis忘记密码的情况下重置密码

3.搜索服务,进入系统服务,停止Redis服务。...

C# Task详解

1.任务线程池的优点与线程相比有很多优点,但线程池不方便使用。例如:◆ ThreadPool不支持线程取消、完成和失败通知等交互操作;◆ ThreadPool不支持线程执行顺序;在过去,如果开发人员想要实现上述功能,他们需要完成大量额外的工作。现在,FCL提供了一个更强大的概念:任务。任务基于线程池执行...

Makefile系列之三 : 变量

第二个语法是针对于make命令行带入的变量,或是系统环境变量。...

koroFileHeader插件快速入门使用教程

插件下载插件可以直接在vscode的扩展中查找koroFileHeader,但是有时候由于网络的问题会查找不到软件。插件配置koroFileHeader支持许多功能,但是不是所有功能都是需要,我们关注往往是如何配置注释内容和注释的一些选项。"fileheader.cursorMode":{//这部分是函数头的配置},"fileheader.customMad...