码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-02-10 20:07:09      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:滑动   argument   jquer   touch   获取   列表   start   存在   触摸事件   

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()
}

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

标签:滑动   argument   jquer   touch   获取   列表   start   存在   触摸事件   

原文地址:https://www.cnblogs.com/yc-braveheart/p/8439567.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!