1. 事件概述
触屏设备的原始触摸事件有四个,【touchstart】【touchmove】【touchend】【touchcancle】,这里只讲前三个,因为最后一个是被动被打断时冒出的事件。
2. touchstart
用户把手指放到屏幕上的一刹那,触发的事件。
3. touchmove
用户用手指在屏幕上滑动,会持续触发这个事件。
4. touchend
用户的手指离开屏幕时触发的事件。
5. 属性概述
每一次触发事件,这个事件会 attach 一些 properties,就是附带一些额外信息给我们。这里主要实验 【touches】【targetTouches】【changedTouches】三个属性。这三个属性都是数组,从他们的名字的复数形式上就可以看出这个信息。
6. 一个定义:触摸
一个手指放在屏幕上,定义为一个触摸。这个触摸包含了这个手指的位置信息,等等。总之一个触摸基本上就可以看做屏幕上的一个手指。
7. 属性之touches数组
触发一次事件时,屏幕上所有的【触摸】会放在这个数组里。
例子:用一根手指放在屏幕上,触发了一次【touchstart】事件,那么这个事件触发的时候,关联的【touches】数组就有一个元素,就是你这根手指头的相关信息。
例子:你已经放了一根手指头在屏幕上,然后放第二根手指头,放第二根的时候,触发的【touchstart】事件,关联的【touches】数组就有两个元素了,就是这两根手指头的信息。
8. 属性之targetTouches数组
触发一次事件时,屏幕上的所有【触摸】里,跟这次事件关联的【触摸】在一个 dom node 里的那些【触摸】会放到 【targetTouches】数组里。至于 dom node,就是指 来源自一个dom 节点。比如说来源于一个<td></td>,或者来源于一个<div></div> 。
例子:一个表格,两个td, 也就是两列,你有一根指头在第一个td里触摸着,然后再放一根指头到第二个td里,那么第二个指头引起的【touchstart】事件,所关联的【targetTouches】数组只有一个元素,那就是第二个指头自己的这次【触摸】。
例子:一个表格,两个td,也就是两列,你有一根指头在第一个td里触摸着,然后再放一根指头到第一个td里,那么第二个指头引起的【touchstart】事件,所关联的【targetTouches】数组就有两个元素了,那就是第一根指头的【触摸】和第二个指头自己的【触摸】。
9. 插讲:【触摸】对象的属性们
上面所讲的数组里存放的都是【触摸】对象。那么【触摸】对象都有些什么属性呢。
【https://developer.mozilla.org/en-US/docs/Web/API/Touch/target】,这个链接可以详细查看。
这里我讲一个属性就是
[触摸].target属性。
这个属性是什么呢。
就是你的指头第一次碰到屏幕的时候,指头所在的dom node,然后无论你的指头怎么移动,这个target属性都不会变了。
10. 属性之changedTouches数组
触发一次事件时,引发这次事件的【触摸】所组成的数组。
例子iphone——1-【touchstart】:现在在iphone上测试【touchstart】事件,现在同时用两根手指放到屏幕上,那么会引起几次【touchstart】事件?答案是跟你这两个【触摸】对象的target有关。如果这两个手指的【触摸】的target一样,那么就会引发一次【touchstart】事件,自然,关联的【changedTouches】数组的元素数量就是2.
例子iPhone——2-【touchmove】:现在在iPhone上测试【touchmove】事件,将两根手指放到屏幕上以后,然后同时滑动,那么这两根手指的移动会分别触发不同的【touchmove】事件还是会统一触发一个【touchmove】事件呢?答案也是跟这两个【触摸】对象的target有关。如果这两个手指的【触摸】的target一样,那么就会统一触发一个【touchmove】事件,自然,关联的【changedTouches】数组的元素就是2.
例子iPhone——3-【touchend】:同理,同上。
例子Android——1-【touchstart】:现在在Android上测试【touchstart】事件,现在同时用两根手指放到屏幕上,那么会引起几次【touchstart】事件?答案是,两次。也就是是说这两次关联的【changedTouches】数组的元素都是1.
例子Android——2-【touchmove】:现在在Android上测试【touchmove】事件,将两根手指放到屏幕上以后,然后同时滑动,那么这两根手指的移动会分别触发不同的【touchmove】事件还是会统一触发一个【touchmove】事件呢?答案是会统一触发一次。而不会根据target的不同而分别区分。
例子Android——3-【touchend】:会单独触发,而不会统一触发。