touch——移动端

touch事件原生一定要用addEventListener来绑定

一、原生

• touchstart：触摸开始时触发
• touches：当前位于屏幕上所有手指的列表
• event.touches.length : 记录一瞬间触摸到的手指数
• event.touches[0].screenX : 记录第一根手指在屏幕的x轴位置
• event.touches[0].screenY : 记录第一根手指在屏幕的y轴位置
• touchmove：手指在屏幕中移动时触发
• touchend：触摸结束的时候触发

为阻止滑动屏幕时使得页面切换，一般会添加阻止默认事件：

document.addEventListener("touchstart",function (){
    event.preventDefault();
},false);

二、touch.js

• 格式：

• touch.on(obj,"",listener);

• obj：对象，不是获取的，如：#div等
• “”：里面为移动事件
• listener：为函数function（）{}

 

• drag：抓取并拖动目标

• touch.on("#div1","drag",function (ev){
  console.log(ev.x+","+ev.y); //移动的x/y轴距离
  });

 

• dragend：拖动结束时触发

 

• swipe：滑动手指触发
• swipeleft：向左滑动触发
• swiperight：向右滑动触发
• swipeup：向下滑动触发
• swipedown：向上滑动触发

 

• tap：点击一次触发

 

• doubletap：双击触发

 

• pinch：捕获手势（放大或缩小）
• ev.scale：捕获放大的倍数

• obj.style.webkitTransform = "scale("+ds+")";
  //设置对于原来的放大/缩小倍数

   

• rotate：旋转（双指）

• touch.on("#div1","rotate",function (ev){
  var newAngle=ev.rotation+angle; //ev.rotation 捕获当前旋转的角度
  if (ev.fingerStatus == "end"){ //ev.fingerStatus 捕获当前手指状态（开始/运动/结束）
  angle=newAngle;
  }
  this.style.webkitTransform="rotate("+newAngle+"deg)"; //设置变换角度
  });

   

• 在touchstart中加入：

• touch.on("#div1","touchstart",function (ev){
  ev.startRotate(); //可以用单指来旋转
  ev.preventDefault();
  });

 

三、移动端事件——deviceorientation（可做重力游戏）

• event.beta：  x轴
• event.gamma：  y轴
• event.alpha：  z轴