移动端基础事件总结与应用

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 触发当前事件的手指列表
   每个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"）;//相当于mousedownbox.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+"<br/>"+"y:"+motion.y+"<br/>"+"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）+"</br>y轴倾斜:"+ev.gamma.toFixed（1）+"</br>z轴倾斜:"+ev.alpha.toFixed（1）;}）;

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！