web中的触摸（touch）与手势（gesture）事件
一、触摸事件（TouchEvent）：
事件：
-
touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发
-
touchmove:当手指在屏幕上滑动时连续的触发。调用preventDefault()可阻止滚动
-
touchend:当手指从屏幕上移开时触发
-
touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件，文档中没有明确说明
事件属性：
-
e.touches:当前屏幕上所有触摸点的集合列表 -
e.targetTouches: 绑定事件的那个结点上的触摸点的集合列表 -
e.changedTouches: 触发事件时改变的触摸点的集合
事件属性返回数组的每个Touch对象包含下列属性：
-
clientX:触摸目标在视口中的X坐标。
-
clientY:触摸目标在视口中的Y坐标。
-
identifier：表示触摸的唯一ID。
-
pageX：触摸目标在页面中的x坐标。
-
pageY：触摸目标在页面中的y坐标。
-
screenX:触摸目标在屏幕中的x坐标。
-
screenY:触摸目标在屏幕中的y坐标。
-
target:触摸的DOM节点坐标。
例1、单个手指touch
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"> <title>single figure touch test</title> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0; padding: 0 } #canvas { position: relative; width: 100%; height: 100%; } .spirit { /* 方块的class名称*/ position: absolute; width: 50px; height: 50px; background-color: red; } </style> </head> <body> <div id="canvas"></div> <script> // define global variable var canvas = document.getElementById("canvas"), spirit, startX, startY; // touch start listener function touchStart(event) { //防止手指的操作引起页面滑动 event.preventDefault(); if (spirit || !event.touches.length) return; var touch = event.touches[0]; startX = touch.pageX; startY = touch.pageY; spirit = document.createElement("div"); spirit.className = "spirit"; //注意：一定要加‘px’单位 spirit.style.left = startX + 'px'; spirit.style.top = startY + 'px'; canvas.appendChild(spirit); } // add touch start listener canvas.addEventListener("touchstart", touchStart, false); // touch move listener function touchMove(event) { //防止手指的操作引起页面滑动 event.preventDefault(); if (!spirit || !event.touches.length) return; var touch = event.touches[0], x = touch.pageX - startX, y = touch.pageY - startY; spirit.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)'; } // touch move listener canvas.addEventListener("touchmove", touchMove, false); // touch end listener function touchEnd(event) { if (!spirit) return; canvas.removeChild(spirit); spirit = null; } // touch end listener canvas.addEventListener("touchend", touchEnd, false); </script> </body> </html>
例2、多个手指touch
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"> <title>multi figure touch test</title> <style type="text/css"> html, body { margin: 0; padding: 0; height: 100%; width: 100%; } #canvas { width: 100%; height: 100%; position: relative; } .spirit { position: absolute; width: 70px; height: 70px; } </style> </head> <body> <div id="canvas"></div> </body> <script type="text/javascript"> var canvas = document.getElementById("canvas"), stacks = [{ color: "red" }, { color: "blue" }, { color: "green" }, { color: "black" }, { color: "yellow" }, { color: "orange" }]; function getEmptyStack() { var i = 0, s, l = stacks.length; for (; i < l; i++) { s = stacks[i]; if (!s.touchId) return s; } return null; } function getStackByTouchId(touchId) { var i = 0, s, l = stacks.length; for (; i < l; i++) { s = stacks[i]; if (s.touchId == touchId) return s; } return null; } function touchStart(e) { e.preventDefault(); var touches = e.changedTouches, i = 0, l = touches.length, touch, stack; for (; i < l; i++) { touch = touches[i]; stack = getStackByTouchId(touch.identifier); if (stack) return; stack = getEmptyStack(); if (stack) { stack.touchId = touch.identifier; stack.spirit = document.createElement("div"); stack.spirit.className = "spirit"; stack.startX = touch.pageX; stack.startY = touch.pageY; stack.spirit.style.left = touch.pageX + "px"; stack.spirit.style.top = touch.pageY + "px"; stack.spirit.style.backgroundColor = stack.color; canvas.appendChild(stack.spirit); } else { // stack list is full return; } } } function touchMove(e) { e.preventDefault(); var touches = e.targetTouches, i = 0, l = touches.length, touch, stack; for (; i < l; i++) { touch = touches[i]; stack = getStackByTouchId(touch.identifier); if (stack) { var x = touch.pageX - stack.startX, y = touch.pageY - stack.startY, spirit = stack.spirit; spirit.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)'; } } } function touchEnd(e) { var touches = e.changedTouches, i = 0, l = touches.length, touch, stack; for (; i < l; i++) { touch = touches[i]; stack = getStackByTouchId(touch.identifier); if (stack) { stack.touchId = null; canvas.removeChild(stack.spirit); stack.spirit = null; } } } //当触控被中断 function touchCancel(e) { var touches = e.changedTouches, i = 0, l = touches.length, touch, stack; for (; i < l; i++) { touch = touches[i]; stack = getStackByTouchId(touch.identifier); if (stack) { stack.touchId = null; canvas.removeChild(stack.spirit); stack.spirit = null; } } } canvas.addEventListener("touchstart", touchStart, false); canvas.addEventListener("touchmove", touchMove, false); canvas.addEventListener("touchend", touchEnd, false); canvas.addEventListener("touchCancel", touchCancel, false); </script> </html>
例3、单个手指放下并滑动
1、当手指滑动时，整个page会跟着移动，除非preventDefault了body的touchmove。
2、当手指停下来后， body的onscroll将会触发。
------------------------------------------------------------------------------------------------------
二、手势事件（GestureEvent）：
GestureEvent包含手指点击（click），轻拂（flick），双击（double-click），两只手指的分开/闭合（scale）、转动（rotate），手指分开比例（scale）和手指转动角度（rotation）信息。
事件：
- gesturestart:当有两根或多根手指放到屏幕上的时候触发
- gesturechange:当有两根或多根手指在屏幕上，并且有手指移动的时候触发
- gestureend:当倒数第二根手指提起的时候触发，结束gesture
事件属性：
-
e.rotation:两只手指的转动 -
e.scale: 两只手指的分开/闭合
例1、依次放下两根手指
1、第一根手指放下，触发touchstart
2、第二根手指放下，触发gesturestart
3、触发第二根手指的touchstart
4、立即触发gesturechange
5、手指移动，持续触发gesturechange
6、第二根手指提起，触发gestureend
7、触发第二根手指的touchend
8、触发touchstart！注意，多根手指在屏幕上，提起一根，会刷新一次全局touch！重新触发第一根手指的touchstart。
9、提起第一根手指，触发touchend例2、让element随着你的两根手指运动而转动
e.target.style.webkitTransform = 'scale(' + e.scale + startScale + ') rotate(' + e.rotation + startRotation + 'deg)';
------------------------------------------------------------------------------------------------------
参考资料：
【1】指尖下的js ——多触式web前端开发之一：对于Touch的处理
【2】触摸与手势事件
