一 、iOS下 移动端多指事件包括：
1、 gesturestart
手指触碰当前元素，屏幕上有两个或者两个以上的手指
注意：我们说的多指，指定是两个手指
2 、gesturechange
手指触碰当前元素，屏幕上有两个或者两个以上的手指位置在发生移动
3 、gestureend
在gesturestart后, 屏幕上只剩下两根以下（不包括两根）的手指
注意：手指列表：（全部为数组，返回值为长度length）
changedTouches:目标元素上的目标事件
targetTouches:目标元素的手指列表
touches:屏幕上的手指列表
二 、旋转和缩放
scale：event.scale 缩放比例的计算是 初始值 * 比值 。初始值一般为1
注意：根据我们的生理极限，不允许出现负值；
transforemCss(box,"translateZ",0); //设置z轴清除 transform在执行的时候残影问题
rotation ：event.rotation 角度计算= 现在的角度 -开始时的角度。初始值一般为0注意：手指旋转的角度，一般只考虑0-90度；
一般指手指放在元素上进行缩放
三 、思维导图
注：
1 Android下模拟多指事件
var callback = {
start:function(){
box.style.background = 'pink'
},
change:function(){
box.innerHTML += 'change<br />'
},
end:function(){
box.style.background = 'yellow';
box.innerHTML = '';
}
}
//功能部分
gesture(box,callback);
function gesture(node,callback){
//gesturestart是否执行
var flag = false;
//gesturestart 手指触碰当前元素，屏幕上有两个或者两个以上的手指
node.addEventListener('touchstart',function(event){
var touch = event.touches;
if(touch.length >= 2){
//进入多指事件，flag变为true
flag = true;
//gesturestart
//如果callback存在 ，且start类型为函数，执行callback['start']();
if(callback && typeof callback['start']== 'function'){
callback['start']();
};
};
})
//gesturechange 手指触碰当前元素，屏幕上有两个或者两个以上的手指位置在发生移动
node.addEventListener('touchmove',function(event){
var touch = event.touches;
if(touch.length >= 2){
//gesturechange
if(callback && typeof callback['change'] == 'function'){
callback['change']();
}
}
});
//gestureend 在gesturestart后, 屏幕上只剩下两根以下（不包括两根）的手指
node.addEventListener('touchend',function(event){
var touch = event.touches;
if(flag){
if(touch.length < 2){
//gestureend
if(callback && typeof callback['end']=='function'){
callback['end']();
}
}
};
//重置
flag = false;
})
}
2 缩放、旋转 的实现
(function(win){
win.gesture = function (node,callback){
//gesturestart是否执行
var flag = false;
//线段1
var startC = 0;
//∠1
var startD = 0;
//gesturestart 手指触碰当前元素，屏幕上有两个或者两个以上的手指
node.addEventListener('touchstart',function(event){
var touch = event.touches;
if(touch.length >= 2){
flag = true;
//event.touches[0].clientX
//求线段、角度
startC = getC(touch[0],touch[1]);
startD = getD(touch[0],touch[1]);
//gesturestart
if(callback && typeof callback['start']== 'function'){
callback['start']();
};
};
})
//gesturechange 手指触碰当前元素，屏幕上有两个或者两个以上的手指位置在发生移动
node.addEventListener('touchmove',function(event){
var touch = event.touches;
if(touch.length >= 2){
//gesturechange
//线段
var nowC = getC(touch[0],touch[1]);
//缩放比例
event.scale = nowC/startC;
//角
var nowD = getD(touch[0],touch[1]);
//旋转角度=现在的值-开始的值
event.rotation = nowD - startD;
if(callback && typeof callback['change'] == 'function'){
callback['change'](event);
}
}
});
//gestureend 在gesturestart后, 屏幕上只剩下两根以下（不包括两根）的手指
node.addEventListener('touchend',function(event){
var touch = event.touches;
if(flag){
if(touch.length < 2){
//gestureend
if(callback && typeof callback['end']=='function'){
callback['end']();
}
}
};
//重置
flag = false;
})
}
//求线段距离
win.getC = function (p1,p2){
var a = p1.clientX - p2.clientX;
var b = p1.clientY - p2.clientY;
//Math.sqrt() 开根号
var c = Math.sqrt(a*a + b*b);
return c;
}
//求角度
win.getD = function (p1,p2){
var y = p1.clientY - p2.clientY;
var x = p1.clientX - p2.clientX;
var deg = Math.atan2(y,x);
//弧度转角度
deg = deg*180/Math.PI;
return deg;
}
})(window);