移动开发基础（二）-touch事件

手机上的大部分交互都是通过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：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。

现在来一个小实例

 var spots={},touches,timer;
      document.addEventListener('touchstart',function(e){ 
          e.preventDefault();
          [].forEach.call(e.targetTouches,function(touch){
              //如果已经有了小光点，直接离开
                if(spots[touch.identifier]){
                    return;
                }
                var spot=spots[touch.identifier]=document.createElement('div');
                spot.classList.add('spot');
                spot.style.top=touch.pageY-35;
                spot.style.left=touch.pageX-35;
                document.body.appendChild(spot);
          }) 
      },false);
      document.addEventListener('touchmove',function(e){
          e.preventDefault();
          touches=e.touches;
          timer=setInterval(function(){
            renderTouches(touches);
       },16) 
      });
      function renderTouches(touches){
          if(!touches){
              return;
          };
          [].forEach.call(touches,function(touch){
              var spot=spots[touch.identifier]
              if(spot){
                  spot.style.top=touch.pageY-35;
                  spot.style.left=touch.pageX-35;
              }
          })
      }
     document.addEventListener('touchend',function(e){
          
         e.preventDefault();
         [].forEach.call(e.changedTouches,function(touch){
             var spot=spots[touch.identifier]
             if(spot){
                 document.body.removeChild(spot);
                 delete spots[touch.identifier];
             }
         })
         if(e.changedTouches.length==0){
             clearInterval(timer);
         }
     })

css代码

  body{
             color:white;
             background-color: #222;
         }
         .spot{
             position: absolute;
             width:70px;
             height:70px;
             border-radius: 35px;
             box-shadow: 0px 0px 40px #fff;
             background-color: #fff;
             opacity: .7;
         }

实现的效果是点击触摸屏时出现一个小圆点，小圆点随着手移动。