IOS的Safari还引入了一组手势事件。当两个手指触摸屏幕时就会产生手势，手势通常会改变显示项的大小，或者旋转显示项。有三个手势事件，分别如下:
gesturestart 当一个手指已经按在屏幕上，而另一个手指又触摸在屏幕时触发
gesturechange 当触摸屏幕的任何一个手指的位置发生改变的时候触发
gestureend 当任何一个手指从屏幕上面移开时触发
ev.rotation 表示手指变化引起的旋转角度，负值表示逆时针，正值表示顺时针，从0开始。
ev.scale 表示两个手指之间的距离情况，向内收缩会缩短距离，这个值从1开始，并随距离拉大而增长。
注意：
1. gesture事件目前只有 IOS 2.0以上支持，安卓的暂时没有支持。
2. 一定要阻止浏览器的默认行为。
demo1:多指旋转
var startDeg=0; //上次旋转后的角度 //两个或者两个以上手指按下 box.addEventListener('gesturestart',function(){ this.style.background='blue'; //rotate(90deg) if(this.style.transform){ startDeg=parseFloat(this.style.transform.split('(')[1]); } }); //两个或者两个以上手指变换 box.addEventListener('gesturechange',function(ev){ /*this.style.background='black'; this.innerHTML=ev.rotation;*/ this.style.transform='rotate('+(ev.rotation+startDeg)+'deg)'; }); //两个或者两个以上手指抬起 box.addEventListener('gestureend',function(){ this.style.background='green'; });
demo2:多指缩放
document.addEventListener('touchstart',function(ev){ ev.preventDefault(); }); document.addEventListener('touchmove',function(ev){ ev.preventDefault(); }); var box=document.getElementById("box"); var startScale=1; //上次缩放后的角度 //两个或者两个以上手指按下 box.addEventListener('gesturestart',function(){ this.style.background='blue'; //rotate(90deg) if(this.style.transform){ startScale=parseFloat(this.style.transform.split('(')[1]); } }); //两个或者两个以上手指变换 box.addEventListener('gesturechange',function(ev){ /*this.style.background='black'; this.innerHTML=ev.rotation;*/ var sc=ev.scale*startScale; sc=sc<0.5?0.5:sc;//设置最小缩放到0.5 this.style.transform='scale('+sc+')'; }); //两个或者两个以上手指抬起 box.addEventListener('gestureend',function(){ this.style.background='green'; });