说在前面
移动端常用的事件上篇文章已讲,这篇文章讲点花的,多指操作(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);