移动端事件

Touch事件

只能在移动端触发

Touch事件的event对象

event对象的常用属性

1. type 事件类型
2. target目标元素
3. touches 屏幕上的所有触摸点
4. targetTouches 目标上所有触摸点
5. changedTouches 事件触发时，状态发生了改变的所有触摸点

触摸点的常用属性

触摸点：const touch=evt.changedTouches[0]

1. identifier 触摸点id（唯一标识符）,一般多指触摸有用
2. target 目标元素
3. screenX/screenY 触点相对于屏幕左边缘的X、Y坐标 
4. clientX/clientY 触点相对于可视区域左边缘的X、Y坐标。不包括任何滚动偏移
5. pageX/pageY 触点相对于 HTML 文档左边缘的X、Y坐标。包括滚动偏移

阻止浏览器的默认行为

1. 可以在 touch 的事件处理函数中使用 evt.preventDefault() 阻止浏览器的默认行为
2. touch-action 告诉浏览器哪些触摸操作让浏览器处理，阻止其他触摸操作的默认行为(css样式)
3. touch-action: pan-y允许垂直平移/ manipulation只允许进行滚动和持续缩放操作，不允许双击缩放

单指拖拽

Pointer事件

pc端类似于mouse事件移动端类似于touch事件

触摸点移出目标元素，touchmove事件依然会持续触发，pointermove和mousemove事件不会再触发

Pointer事件的event对象

event对象的常用属性

1. pointerId 指针id（唯一标识符）
2. type 事件类型
3. pointerType 指针类型（鼠标/笔/触摸等）
4. target 目标元素
5. screenX/screenY 指针相对于屏幕左边缘的X、Y坐标 
6. clientX/clientY 指针相对于可视区域左边缘的X、Y坐标。不包括任何滚动偏移
7. pageX/pageY 指针相对于 HTML 文档左边缘的X、Y坐标。包括滚动偏移

阻止浏览器的默认行为

1. Pointer 的事件处理函数中，evt.preventDefault() 阻止的是 PC 端的默认行为（不能阻止 scrolling, pinch/zoom, 鼠标事件等默认行为，可以阻止图片拖动的默认行为）
2. 可以在 touch 的事件处理函数中使用 evt.preventDefault() 阻止移动端的默认行为
3. touch-action 设置触摸操作时浏览器的默认行为

单指拖拽 

手势模拟