标签：
例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
e.touches:当前屏幕上所有触摸点的集合列表
e.targetTouches: 绑定事件的那个结点上的触摸点的集合列表
e.changedTouches: 触发事件时改变的触摸点的集合
上面三个返回的都是数组，而数组的每个元素，有一个参数叫identifier（例如e.targetTouches[0].identifier），表示每次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>
参考资料：
指尖下的js ——多触式web前端开发之一：对于Touch的处理
标签：
原文地址：http://www.cnblogs.com/xjnotxj/p/5570849.html
