移动端的多指事件以及用原生JS封装通用多指事件

IOS的多指事件

事件类型：

gesturestart: 手指触碰当前元素，屏幕上有两个或者两个以上的手指 gesturechange:手指触碰当前元素，屏幕上有两个或者两个以上的手指位置在发生移动。 gestureend:在gesturestart后, 屏幕上只剩下两根以下（不包括两根）的手指

Event额外新增的属性

属性 rotation : 表示手指变化引起的旋转角度，负值表示逆时针旋转，正值表示顺时针旋转。

属性scale :表示发生多指触摸事件的元素随着手指之间距离变大而增长得比例。

封装可以在安卓端使用的多指事件函数

(function (w) { w.gesture = function (ele,callback) { let isStart = false; ele.addEventListener('touchstart',function (event) { if(event.touches.length >= 2){ isStart = true ; //记录两个触点间的初始距离 this.startDistance =getDistance(event.touches[0],event.touches[1]); //记录两个触点的初始角度 this.startDeg =getDeg(event.touches[0],event.touches[1]); //判断是否传入回调，调用回调函数 if(callback && typeof callback['start'] === "function"){ callback['start'](); } } }); ele.addEventListener('touchmove',function (event) { //判断移动时屏幕上的触点个数 if(event.touches.length >= 2){ //计算两个触点的实时距离 const currDistance = getDistance(event.touches[0], event.touches[1]); //记录两个触点的实时角度 const currDeg = getDeg(event.touches[0], event.touches[1]); //计算实时距离与初始距离的比例，传入event的属性中 event.scale = currDistance / this.startDistance; //计算实时角度与初始角度的差值，传入event的属性中 event.rotation = currDeg - this.startDeg; //判断是否传入回调，调用回调函数 if(callback && typeof callback['change'] === "function"){ //将event传回去 callback['change'](event); } } }); // 手指离开当前元素时，先判断当前的触点是否小于2，是否曾触发过touchstart事件 ele.addEventListener('touchend',function (event) { if(event.touches.length < 2 && isStart){ //此时调用end回调 if (callback && typeof(callback['change']) === 'function') { callback['end'](); } //重置isStart为false isStart = false; } }); // 获取两个点之间的距离 function getDistance(touch1,touch2) { const a = touch1.clientX - touch2.clientX; const b = touch1.clientY - touch2.clientY; //勾股定理，得出两点距离长度 return Math.sqrt(a * a + b * b); } // 获取两个触点的角度 function getDeg(touch1,touch2) { const x = touch1.clientX - touch2.clientX; const y = touch1.clientY - touch2.clientY; //tan值 = 对边Y / 临边X const radian = Math.atan2(y, x); return radian * 180 / Math.PI; } } })(window);

使用方法：

获取发生多指触摸事件的元素

const boxNode = document.querySelector('#box');

定义初始比例与旋转角度

let iniScale = 1, iniRotate = 0;

调函数

gesture(boxNode,{ start:function () { iniScale = transformCss(boxNode,'scale'); iniRotate = transformCss(boxNode,'rotate'); }, change:function (event) { transformCss(boxNode,'scale',event.scale*iniScale); transformCss(boxNode,'rotate',iniRotate + event.rotation); } })

注：transform是一个可以获取与设置css中transform值的函数，具体封装方法见之前博客。