touch事件分别在什么时候被触发
touchstart：手指触摸动作开始
touchmove：手指触摸后移动
touchcancel：手指触摸动作被打断，如来电提醒，弹窗
touchend：手指触摸动作结束
touches、targetTouches和changeTouches 区别
关于 touch 事件中 touches、targetTouches和changeTouches 的可视化解读 - 掘金 (juejin.cn)
touch事件中的touches、targetTouches和changedTouches详解_e.changedtouches-CSDN博客
touches：当前位于屏幕上的所有手指的列表。
targetTouches：位于当前DOM元素上手指的列表。
changedTouches：涉及当前事件手指的列表。
通过一个例子来区分一下触摸事件中的这三个属性：
- 用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。
- 用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。当两个手指触摸相同元素时，targetTouches和touches的值相同，否则targetTouches 只有一个值。changedTouches此时只有一个值，为第二个手指的触摸点，因为第二个手指是引发事件的原因
- 用两个手指同时接触屏幕，此时changedTouches有两个值，每一个手指的触摸点都有一个值
- 手指滑动时，三个值都会发生变化
- 一个手指离开屏幕，touches和targetTouches中对应的元素会同时移除，而changedTouches仍然会存在元素。
- 手指都离开屏幕之后，touches和targetTouches中将不会再有值，changedTouches还会有一个值，此值为最后一个离开屏幕的手指的接触点。
pageX, pageY, clientX, clientY 区别
clientX、clientY 是指当前触碰位置相对于当前body可视区域的左顶点的x，y坐标
pageX、pageY 是指当前触碰位置相对于整个页面来说，包括了被卷去的body部分的长度
screenX、screenY 是指当前触碰位置相对于当前电脑屏幕的x，y坐标
参考资料
pageX、clientX等的区别_clientx pagex-CSDN博客
关于 touch 事件中 touches、targetTouches和changeTouches 的可视化解读 - 掘金 (juejin.cn)
touch事件中的touches、targetTouches和changedTouches详解_e.changedtouches-CSDN博客
