标签：
手机上的大部分交互都是通过touch来实现的，于是，对于触屏的交互式网站，触摸事件是相当重要的。
先了解一些规范
手指触摸屏幕可以触发的几个事件
touchstart：触摸开始的时候触发
touchmove：手指在屏幕上滑动的时候触发
touchend：触摸结束的时候触发
每一个触摸事件都会产生一个触摸事件对象，对象包含的公共事件属性（他们都是TouchList类型的对象里面装着Touch对象），而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：
touches：当前位于屏幕上的所有手指的列表。
targetTouches：位于当前DOM元素上手指的列表。
changedTouches：涉及当前事件手指的列表。
每个触摸点由包含了如下触摸信息（常用）：
identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号（android4.1，uc）
target：DOM元素，是动作所针对的目标。
pageX/pageX/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。
radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。
现在来一个小实例
1 var spots={},touches,timer; 2 document.addEventListener(‘touchstart‘,function(e){ 3 e.preventDefault(); 4 [].forEach.call(e.targetTouches,function(touch){ 5 //如果已经有了小光点，直接离开 6 if(spots[touch.identifier]){ 7 return; 8 } 9 var spot=spots[touch.identifier]=document.createElement(‘div‘); 10 spot.classList.add(‘spot‘); 11 spot.style.top=touch.pageY-35; 12 spot.style.left=touch.pageX-35; 13 document.body.appendChild(spot); 14 }) 15 },false); 16 document.addEventListener(‘touchmove‘,function(e){ 17 e.preventDefault(); 18 touches=e.touches; 19 timer=setInterval(function(){ 20 renderTouches(touches); 21 },16) 22 }); 23 function renderTouches(touches){ 24 if(!touches){ 25 return; 26 }; 27 [].forEach.call(touches,function(touch){ 28 var spot=spots[touch.identifier] 29 if(spot){ 30 spot.style.top=touch.pageY-35; 31 spot.style.left=touch.pageX-35; 32 } 33 }) 34 } 35 document.addEventListener(‘touchend‘,function(e){ 36 37 e.preventDefault(); 38 [].forEach.call(e.changedTouches,function(touch){ 39 var spot=spots[touch.identifier] 40 if(spot){ 41 document.body.removeChild(spot); 42 delete spots[touch.identifier]; 43 } 44 }) 45 if(e.changedTouches.length==0){ 46 clearInterval(timer); 47 } 48 })
css代码
1 body{ 2 color:white; 3 background-color: #222; 4 } 5 .spot{ 6 position: absolute; 7 width:70px; 8 height:70px; 9 border-radius: 35px; 10 box-shadow: 0px 0px 40px #fff; 11 background-color: #fff; 12 opacity: .7; 13 }
实现的效果是点击触摸屏时出现一个小圆点，小圆点随着手移动。
标签：
原文地址：http://www.cnblogs.com/sliuie/p/5160389.html
