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

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

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");

//相当于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=McQlHriath.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

Ihttp://OS的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';

});

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。