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】：会单独触发，而不会统一触发。

触屏设备触摸事件实验和记录