移动端的touch事件(三)

之前对于touch事件的事件类型等基本信息有了一些基础的了解,现在就继续看看,在touch事件被触发时,我们可以从这个触发的事件中获取到哪些有用的信息呢,下面就以touchstart事件为例。

概述

关于touch对象所包含的属性,在之前的文章中,已经做了提及,只是并没有对其中的属性进行说明,可以参考:移动端的touch事件(一)

在上一篇的内容中,说到了touch对象所包含的基本属性,并且也有一个简单的示例,来查看touch事件被触发时,所包含的所有的属性以及方法。这里继续给这些进行一些实例的验证。

示例演示

查看事件中属性和方法的代码实现是很简单的,这里就不做叙述了,可以直接点击下面的链接,查看源代码即可,同时如果想要在手机端查看touchstart事件的属性值,请扫一下下面的二维码链接到对应的静态网页即可:

静态页网址二维码:

源代码查看网址:http://www.zhangyunling.com/study/2014/20140921/touch-10.html

从获得的结果中,我们可以看到很多我们需要或者不需要的信息,比如我们以后可能会经常用到的一些属性包括:

属性 属性值
changedTouches [object TouchList]
targetTouches [object TouchList]
touches [object TouchList]
returnValue true
srcElement [object HTMLHtmlElement]
cancelable true
bubbles true
eventPhase 3
currentTarget [object HTMLDocument]
target [object HTMLHtmlElement]
type touchstart
stopPropagation function stopPropagation(){[native code]}
preventDefault function preventDefault(){[native code]}
stopImmediatePropagation function stopImmediatePropagation(){[native code]}

这里,除了前三种changedTouchestargetTouchestouches之外的其他属性,都是我们常见的一些属性值,所以这里对于这些属性就不做处理,而这三个新的属性,是只针对touch事件存在的属性值,并且是我们之后处理时,获取一些关键数据的属性,所以这里就只对这三个属性进行说明。

TouchList

看了上面的列表中的内容,首先先注意到的一点就是,TouchList对象,一个新的也是唯有touch事件的event对象中,才会出现的一种对象,在了解changedTouchestargetTouchestouches这三种属性之前,先对TouchList对象进行一个简单的了解。

TouchList是一个只读的类数组对象,它表示在当前的touch事件中,与触摸屏的接触点的个数,比如:如果你当前是三根手指在同时在触摸屏上,那么每一根手指都会有一个相对应的touch对象,来记录对应手指的操作相关的信息,这个时候的TouchList类数组中,就有三个数据,分别是这三根手指所对应的touch对象,而TouchList类数组的长度也就是3.

根据我们对类数组的了解,既然是类数组,那么就会有length属性,来表示这个类数组的长度,并且可以使用属性的中括号取值方式,取出对应位置的值。OK,下面我们继续以一个小的测试例子,来看一下,一个类数组,包含了哪些信息可供我们使用。

属性 属性值
0 [object Touch]
length 1
item function item(){[native code]}

上述列表中,是给出的当一个手指时的touches中,所包含的属性值,当然,从这里,也证明了TouchList对象时一个类数组。而item方法,也跟我们在NodeListHTMLCollection对象中的一样吧,获取第n个对象,只是我们大多数仍然会喜欢使用数组的方式进行操作吧。

如果你先要试着上面的代码显示,那么可以扫下面的这个二维码,访问对应的静态网页。

静态页网址二维码:

源代码查看网址:http://www.zhangyunling.com/study/2014/20140921/touch-11.html

以上信息,主要参考自MDN TouchList

但是在MDN中的TouchList对象的method中,不止包含item的方法,而且还包含一个方法是identifiedTouch,使用方法如下:


var touchItem = touchList.identifiedTouch(id);


首先会根据id,这里的id就是touch对象的唯一标示符identifier的值,获取到一个list集合,然后把这个集合中的第一个返回,这就和我们使用jQuery时,获取一个值时,是相同的原理:


$(".item").val();
//获取class=item的第一个元素的value值。


下面可以测试一下,可以访问下面的网页,然后触摸设备屏幕即可,可以扫下面的二维码进行访问:

静态页网址二维码:

源代码查看网址:http://www.zhangyunling.com/study/2014/20140921/touch-12.html

也许你得到的结果和我的一样,TouchList对象中并没有identifiedTouch方法,应该是因为identifiedTouch还没有被规范化吧,如果您的移动设备上面有火狐的浏览器,应该是会有identifiedTouch方法的,但是在其他的浏览器,有些还是没有支持的,因为在W3C的标准中,TouchList对象只有一个方法就是item,并不包含identifiedTouch方法,请查看:TouchList Interface,所以,对这个属性,知道即可。

touches,changedTouches,targetTouches的区别

既然对TouchList对象有了一个基本的认识,那么现在我们就可以看看touches,changedTouches,targetTouches这三个属性,在touch事件中,所包含的一些信息吧。

这三个属性都是属于TouchList对象的类型,而其中任一个值都是touch对象,也就是在之前第一篇touch相关的文章中提到的相关信息,移动端的touch事件(一).

那么,在这里,我们继续来以一个触发点的形式(一根手指操作屏幕)来确认一下,这个touch对象中包含的信息。

通过下面的二维码,可以访问demo页面,可以通过页面中的touches,changedTouches,targetTouches按钮,选择进行后续操作的TouchList对象。

静态页网址二维码:

源代码查看网址:http://www.zhangyunling.com/study/2014/20140921/touch-13.html

如果您又自己试着玩一下上面的demo页面,就会发现一个问题,这三个属性如果只考虑单个触摸点触发touchstart时,是没有什么区别的。

那么我们继续看看,如果是多个点进行操作呢,如果是多个点的话,会不会有什么区别呢?首先,先把滑动区域进行限制,此时的滑动区域值限制在页面中有边框的区域。

静态页网址二维码:

源代码查看网址:http://www.zhangyunling.com/study/2014/20140921/touch-14.html

这个时候,touches是没有什么问题的,有几根手指在操作,就会保存几个touch对象,而changedTouchestargetTouches却感觉是不灵敏的样子,尤其是changedTouches,因为当把touch事件的触发区域固定在一个小区域之后,changedTouches不论几根手指触发,都是只保存了一个touch对象,changedTouches这个类数组的长度一直只有一个元素。不理解(Android手机测试)。

如果不进行固定呢,把touchstart的监听绑定到document对象上面呢。

静态页网址二维码:

源代码查看网址:http://www.zhangyunling.com/study/2014/20140921/touch-15.html

更让我疑惑的是,此时,这三个属性,都能正确的获取到触点的个数,有几根手指,就能有在各个属性中,就会保存多少个touch对象。

属性 属性值
touches 保存当前一个触摸个数的列表。只读属性(a list of Touches for every point of contact currently touching the surface.)
targetTouches 保存当前一个触摸个数的列表。只读属性,该列表中包含的元素需要发生在当前事件所触发的元素之上(A list of Touches for every point of contact that is touching the surface and started on the element that is the target of the current event.)
changedTouches 该属性是依据事件在触发的,并且获取到的一个列表。我的理解就是,只有事件变化时,才会更改该属性的取值。只读属性(For the touchstart event this must be a list of the touch points that just became active with the current event. For the touchmove event this must be a list of the touch points that have moved since the last event. For the touchend and touchcancel events this must be a list of the touch points that have just been removed from the surface. )

touches属性的解释,很明显,就是当每一个事件被触发时,就会获取此时每个触点的相关信息,并保存到touches对象中去。

targetTouches属性,却是要只有在被绑定的元素本身之上触发,才会被保存到targetTouches属性中去,因为之前的demo里,是把touchstart事件绑定到了document对象上,所以导致该属性获取的值域touches基本相同(按理说,这个属性获取到的touchlist列表,在一定的情况下,是和touches获取到的有区别的,但是我还是不能确定,这个区别到底是由什么因素引起,可以参考touch-14中的示例,但是并不能理解是什么原因导致的)。

changedTouches属性,按我的理解,就是在事件变化时,才会出现这个属性,对于这个确切的说法,还是先看下面的这个例子之后,才能更好的理解了。

验证changedTouches属性和其他两种属性的区别:

静态页网址二维码:

源代码查看网址:http://www.zhangyunling.com/study/2014/20140921/touch-16.html

这个时候,有一个有趣的问题就是,如果你以一个触点(一根手指)来操作的话,touchestargetTouches两个属性,当这个触点(这根手指)离开屏幕,触发touchend事件时,这两个属性中,是不包含任何对象的,就是说,这两个类数组的长度是0。而changedTouches却可以获取到这个触点的touch对象,为什么?

验证这个可以通过很简单的方法,用两个触点(两根手指),其中一个触点一直按着屏幕,而另外一个触点,触发touchend事件,可以看到这个时候,touchestargetTouches的属性中,数组长度为1,是那个一直接触者屏幕的触点的属性值。

从上面的两点,也可以理解到,这三个属性之间的差距,就拿touchend事件时的情况来说明吧(这个比较好理解),当touchend被触发时,手指时离开屏幕了,所以此时的touchestargetTouches属性的属性值,是不会再包含这个刚离开的触点的信息的,所以,当一个触点触发touchend事件时,touchestargetTouches属性值中的touch对象个数就是0了,表示当前一个触点也没有。

changedTouches的属性值,却是包含了触发touchend事件之前,所有的触点,比如一个触点时,这个时候,changedTouches的属性值中,就包含了一个touch对象的信息,代表刚触发touchend事件的这个触点的相关信息。

不知是否可以理解我之前的这些个说明。如有问题,请指出,非常感谢。

明白了touhestargetToucheschangedTouches三者的这一个小小的差别,也就能理解,为何在我们判断滑动方向时,使用changedTouches获取触点的在touchstarttouchend时的位置信息的原因了吧,关于这个,在下一篇文章中进行测试说明。

OK,暂时关于touch事件的属性方面,只想到了这么多,欢迎指教。

总结

上述内容,都是基于Android的系统进行的测试,进行的总结,IOS无设备条件,所以请验证。

本文地址:http://www.zhangyunling.com/?p=235

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>