软件研发|web移动端基础事件总结与应用 dom|css|web|vue|js

1.触摸事件touch
touchstart手指放在屏幕上触发
touchmove手指在屏幕上移动，连续触发
touchend手指离开屏幕触发
touchcancel当系统停止跟踪时触发，该事件暂时用不到
注意：
1.移动端只能事件只能通过监听函数添加，不能用on添加
2.移动端当中就不要用鼠标的事件
3.移动端的事件会触发浏览器的默认行为，所以在调用事件的时候要把默认行为阻止了ev.preventDefault。
demo:

document.addEventListener('touchstart',function(ev){ ev.preventDefault(); }); var box=document.getElementById("box"); box.addEventListener('touchstart',function(){ this.innerHTML='手指按下了'; }); box.addEventListener('touchmove',function(){ this.innerHTML='手指移动了'; }); box.addEventListener('touchend',function(){ this.innerHTML='手指离开了'; });

2.touch事件对象
ev.touches当前屏幕的手指列表
ev.targetTouches当前元素上的手指列表
ev.changedTouches触发当前事件的手指列表
【软件研发|web移动端基础事件总结与应用】每个touch对象都包含了以下几个属性（打印ev.touches如下）：
clientX//触摸目标在视口中的X坐标。
clientY//触摸目标在视口中的Y坐标。
Identifier//标示触摸的唯一ID。
pageX//触摸目标在页面中的X坐标。
pageY//触摸目标在页面中的Y坐标。
screenX//触摸目标在屏幕中的X坐标。
screenY //触摸目标在屏幕中的Y坐标。
target // 触摸的DOM节点目标。
demo:

var box=document.getElementById("box"); //相当于mousedown box.addEventListener('touchstart',function(ev){ //console.log(ev.touches); this.innerHTML=ev.touches.length; //按下手指数 });

3.设备加速度事件devicemotion
devicemotion封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。
其中加速度的数据包含以下三个方向：
x：横向贯穿手机屏幕；
y：纵向贯穿手机屏幕；
z：垂直手机屏幕
鉴于有些设备没有排除重力的影响，所以该事件会返回两个属性：
1、accelerationIncludingGravity(含重力的加速度)
2、acceleration(排除重力影响的加速度)
注意：这个事件只能放在window身上
demo1:显示重力加速度的值

window.addEventListener('devicemotion',function(ev){ var motion=ev.accelerationIncludingGravity; box.innerHTML='x:'+motion.x+' '+'y:'+motion.y+' '+'z:'+motion.z; });

demo2:方块跟着重力左右移动

window.addEventListener('devicemotion',function(ev){ var motion=ev.accelerationIncludingGravity; var x=parseFloat(getComputedStyle(box).left); //box目前的left值 box.style.left=x+motion.x+'px'; });

demo3:摇一摇应用原理

var box=document.getElementById('box'); var lastRange=0; //上一次摇晃的幅度 var isShake=false; //决定用户到底有没有大幅度摇晃 window.addEventListener('devicemotion',function(ev){ var motion=ev.accelerationIncludingGravity; var x=Math.abs(motion.x); var y=Math.abs(motion.y); var z=Math.abs(motion.z); var range=x+y+z; //当前摇晃的幅度 if(range-lastRange>100){ //这个条件成立说明用户现在已经在大幅度摇晃 isShake=true; } if(isShake && range<50){ //这个条件成立，说明用户摇晃的幅度很小了就要停了 box.innerHTML='摇晃了'; isShake=false; } });

4.设备方向事件deviceorientation
deviceorientation封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据（手机所处的角度、方位和朝向等）
ev.beta表示设备在x轴上的旋转角度，范围为-180~180。它描述的是设备由前向后旋转的情况。
ev.gamma表示设备在y轴上的旋转角度，范围为-90~90。它描述的是设备由左向右旋转的情况。
ev.alpha表示设备沿z轴上的旋转角度，范围为0~360。
注意：这个事件只能放在window身上
demo:

window.addEventListener('deviceorientation',function(ev){ box.innerHTML='x轴倾斜:'+ev.beta.toFixed(1)+' y轴倾斜:'+ev.gamma.toFixed(1)+' z轴倾斜:'+ev.alpha.toFixed(1); });

5.手势事件gesture
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'; });

原文链接: https://m.yisu.com/zixun/195796.html