说在前面
移动端常用的事件上篇文章已讲,这篇文章讲点花的,多指操作(ios篇)
ios 多指操作
第一步 清除默认事件
// 清除默认事件 否则会选取元素 document.addEventListener("touchstart",(e)=>{ var e = e || window.event; e.preventDefault(); })
gesturestart 事件
var con = document.getElementById("con"); // 手指触摸屏幕 屏幕上有两个或者两个以上的手指 con.addEventListener("gesturestart",(e)=>{ con.innerHTML = "两个手指"; })
gesturechange 事件
//手指触碰元素,屏幕上有两个或两个以上的手指,位置在发生移动 con.addEventListener('gesturechange', function(e){ con.innerHTML = "移动"; });
gestureend 事件
//手指离开事件 con.addEventListener('gestureend', function(){ con.innerHTML = "手指离开"; });
多指操作应用实例
封装一个cssTransform做一些花式操作
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);