相应的事件有：
touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间，调用preventDefault()可阻止滚动。
touchend:当手指从屏幕上移开时触发。
touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件，文档中没有明确说明。
以上事件的event对象上面都存在如下属性：
touches:表示当前跟踪的触摸操作的Touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个Touch对象包含下列属性：
clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
identifier：表示触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点坐标
下面是实现的一个在ios上的touch例子，效果是一个红方块跟随手指移动：
var canvas = document.getElementById('canvas'), spirit, startX, startY; 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'; spirit.style.left = startX + 'px'; spirit.style.top = startY + 'px'; canvas.appendChild(spirit); } canvas.addEventListener('touchstart', touchStart, false); 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)'; } canvas.addEventListener('touchmove', touchMove, false); function touchEnd(event) { if(!spirit) return; canvas.removeChild(spirit); spirit = null; } canvas.addEventListener('touchend', touchEnd, false);
页面上：
<!DOCTYPE html> <html style=" 100%;height: 100%;"> <head> <title></title> <!--启用viewport--> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <style type="text/css"> .spirit { /* 方块的class名称*/ position: absolute; width: 50px; height: 50px; background-color: red; } </style> </head> <body style="height: 100%;margin:0;padding:0"> <div id="canvas" style="position: relative;100%;height: 100%;"></div> </body> </html>