1、Touch事件
- touch 相关的事件跟普通的其他 dom 事件一样使用，可以直接用 addEventListener 来监听和处理。
- touchstart：当在屏幕上按下手指时触发。
- touchmove：当在屏幕上移动手指时触发。
- touchend：当在屏幕上抬起手指时触发。
- touchcancel：当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的 touch 操作，即触发 touchcancel。一般会在 touchcancel 时暂停游戏、存档等操作。
2、event对象的常用属性
- event.type: 事件类型。
- event.target: 目标元素。
- event.touches: 屏幕上的所有触摸点。
- event.targetTouches: 起始于目标上的所有触摸点。
- event.changedTouches: 事件触发时，状态发生了改变的所有触摸点。
3、触摸点的常用属性
- identifier： 触摸点id（唯一标识符）,一般多指触摸有用。
- target： 目标元素。
- screenX/screenY： 触点相对于屏幕左边缘的X、Y坐标。
- clientX/clientY： 触点相对于可视区域左边缘的X、Y坐标。不包括任何滚动偏移。
- pageX/pageY： 触点相对于 HTML 文档左边缘的X、Y坐标。包括滚动偏移。
4、阻止浏览器默认行为
- 阻止 scrolling, pinch/zoom, 鼠标事件等默认行为。
- 4.1.可以在 touch 的事件处理函数中使用 evt.preventDefault() 阻止浏览器的默认行为。
- 4.2.在css中用touch-action 告诉浏览器哪些触摸操作让浏览器处理，阻止其他触摸操作的默认行为。 touch-action: auto：处理所有触摸操作；touch-action: none：所有触摸操作都不处理；touch-action: manipulation;只允许进行滚动和持续缩放操作，不允许双击缩放。
touch-action:pan-x/pan-y；x轴平移/y轴平移。
5、Touch单指拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width:100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
<script>
const obox = document.getElementById('box');
const drag = ($el) =>{
// 当前被拖拽元素的坐标
const startPos = {
x:0,
y:0
};
// 每次拖拽最开始的触摸点
const startPoint = {};
// 拖拽过程中移动的点
const movePoint = {};
// 执行拖拽事件
$el.addEventListener('touchstart',startHandle,false);
$el.addEventListener('touchmove',moveHandle,false);
$el.addEventListener('touchend',endHandle,false);
$el.addEventListener('touchcancel',endHandle,false);
function startHandle (e) {
e.preventDefault();
const touch = e.changedTouches[0];
startPoint.x = touch.pageX;
startPoint.y = touch.pageY;
}
function moveHandle (e) {
const touch = e.changedTouches[0];
movePoint.x = startPos.x + touch.pageX - startPoint.x;
movePoint.y = startPos.y + touch.pageY - startPoint.y;
console.log(touch.pageX);
obox.style.transform = `translate3d(${movePoint.x}px,${movePoint.y}px,0)`;
}
function endHandle () {
startPos.x = movePoint.x;
startPos.y = movePoint.y;
}
};
drag(obox);
</script>
6、获取手指信息
- touches 当前屏幕上的手指列表。
- targetTouches 当前元素上的手指列表。
- changedTouches 触发当前事件的手指列表。
- 获取手指的个数 e.changedTouches.length。
- 获取坐标 e.changedTouches[0].pageX。
7、手指对象的区别
- 在touchend的时候想要获取手指列表，只能用changedTouches。
- 原因在于，手指抬起了，也就没有touches,targetTouches了，只能用changedTouches。
参考（https://blog.csdn.net/visibleforest/article/details/120316196）
移动端事件.png
