TouchEvent

@touchstart
手指接触屏幕就触发，就触发一次
@touchend
手指从屏幕抬起松开触发一次
@touchmove
手指在屏幕滑动

手指点击，立刻抬起松开，触发一次 touchstart，触发一次touchend，不触发touchmove
手指按住，开始移动，触发一次 touchstart，按住移动的过程中持续触发touchmove，抬起松开触发一次 touchend

touchmove 事件中，中途移动到其他元素，Touch对象并不会改变，还是touchstart 一开始的对象

TouchEvent

touches： 当前正在屏幕上的接触点Touch的数组 TouchList【{Touch}】。TouchList不是数组对象，只能使用普通for循环遍历
不能使用forEach ,map

几根手指正在接触就有几个Touch

targetTouches ：targetTouches 元素是 touches 的真子集。

一根手指操作，触摸的target 就是包含在当前 TouchList中，只能包含一个触摸对象。target对象就是一开始接触的点（touchstart）就确定了，开始进入一个元素，move到其他元素target 对象不会改变

2根手指（一前一后或同时按下）触摸的是同一个元素，TouchList 有2个相同的Touch对象（位置坐标不同）。
如果触摸的是不同的元素，一前一后，则 TouchList 只有最后一次(touchstart)触摸的target，move后 target不会改变

和touches 的区别，2根手指触摸的2个不同元素，touches有2个对象，targetTouches 只有 触摸的最后一次 target对象。
如果2根手指触摸的相同元素，则 targetTouches =touches

子集就是一个集合中的元素，全部都是另一个集合中的元素，有可能与另一个集合相等。真子集就是一个集合中的元素，全部是另一个集合中的元素，但不存在相等。

举例说明：
设全集I为{1, 2, 3}，则它的子集是{1}、{2}、{3}、{1, 2}、{1, 3}、{2, 3}、{1, 2, 3}、?。而它的`真子集为{1}、{2}、{3}、{1, 2}、{1, 3}、{2, 3}。

changedTouches：当前(引发)事件的触摸点的
一根手指按住，就是当前操作的Touch
2根手指，一前一后，第一个不动，第2个移动。只有正在移动的的触摸点
2个手指，touchstart时只有一个触摸点，2个手指同时移动，会有2个触摸点Touch。当一个停下不动，只会留下正在移动的Touch 对象。全部离开touchend ，只会留下最后移动的触摸点(这个值一直会存在)。为最后一个离开屏幕的手指的接触点

touchend 触发后，touches和targetTouches中将不会再有值，changedTouches还保留最后一个离开屏幕的手指的接触点

用一个手指接触屏幕，触发事件， changedTouches 和 targetTouches，touches 有相同的值

Touch

pageX
pageY:鼠标在整个html页面y轴的位置
clientX:触点相对于可见视区 上边缘的 Y 坐标 不包括任何滚动偏移
clientY:鼠标在整个视口的位置（可视区域：可以看得见的页面区域,不包括任何滚动偏移
screenY:鼠标到浏览器最上端的距离,触点相对于屏幕上边缘的 Y 坐标。
screenX:触点相对于屏幕左边缘的 X 坐标。
force:用户对触摸平面的压力大小 是一个从 0.0(没有压力) 到 1.0(最大压力) 的浮点数

target: 触摸的对象，触摸子元素,target 就是子元素

没有滚动条时 clientY=pageY，
有滚动条时：pageY=clientY+scrollTop(滚动的距离)

比较

offsetY:鼠标相对于触发事件的元素的位置
clientTop:元素顶部边框的宽度
offsetTop:元素到到浏览器最上端的距离

参考

https://www.cnblogs.com/mengff/p/6005516.html

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

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

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

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

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

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

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

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

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

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