移动端多指操作一 ios篇

 // 清除默认事件 否则会选取元素
 document.addEventListener("touchstart",(e)=>{
     var e = e || window.event;
         e.preventDefault();
 })

 var con = document.getElementById("con");
 // 手指触摸屏幕 屏幕上有两个或者两个以上的手指
 con.addEventListener("gesturestart",(e)=>{
      con.innerHTML = "两个手指";
  })

 //手指触碰元素，屏幕上有两个或两个以上的手指，位置在发生移动
 con.addEventListener('gesturechange', function(e){
      con.innerHTML = "移动";
  });

 //手指离开事件
 con.addEventListener('gestureend', function(){
      con.innerHTML = "手指离开";
 });

function cssTransform(element, attr, val){
//下面分为取值和赋值阶段，如果val不存在说明是取值的，如果val存在，说明是赋值阶段
//取值阶段
  if(!element.transform){
    element.transform = {};
  } 
  if(typeof val === "undefined"){ 
//取值阶段，又要分为，该值已经有了，和初始化该值阶段
    if(typeof element.transform[attr] === "undefined"){
      switch(attr){
        case "scale":
        case "scaleX":
        case "scaleY":
        case "scaleZ":
          element.transform[attr] = 100;
          break;
        default:
          element.transform[attr] = 0;  
      }
    } 
//取值完毕，返回该值
    return element.transform[attr];
  } else {
//下面为赋值阶段
    element.transform[attr] = val;
    var transformVal  = "";
//因为transform对象中可能不止一个属性，所以要对其进行遍历
    for(var s in element.transform){
      switch(s){
        case "scale":
        case "scaleX":
        case "scaleY":
        case "scaleZ":
          transformVal += " " + s + "("+(element.transform[s]/100)+")";
          break;
        case "rotate":
        case "rotateX":
        case "rotateY":
        case "rotateZ":
        case "skewX":
        case "skewY":
          transformVal += " " + s + "("+element.transform[s]+"deg)";
          break;
        default:
          transformVal += " " + s + "("+element.transform[s]+"px)";       
      }
    }
    element.style.WebkitTransform = element.style.transform = transformVal;
  }

var con= document.getElementById('con');
var start = 0;
oBox.addEventListener('gesturestart', function(e){
  start = cssTransform(con, 'rotate');
}, false);
oBox.addEventListener('gesturechange', function(e){
  var disR = e.rotation;
  cssTransform(con, 'rotate', start + disR);
}, false);

var start = 0;
// 消除缩放时的残影
cssTransform(con, 'translateZ', 0);
con.addEventListener('gesturestart', function(e){
  start = cssTransform(con, 'scale');
}, false);
con.addEventListener('gesturechange', function(e){
  var disS = e.scale;
  cssTransform(con, 'scale', start*disS);
}, false);