移动端开发前端基础事件 【总结+应用】

移动端开发前端|前端开发者

触摸事件touch,设备加速度事件devicemotion,设备方向事件deviceorientation,手势事件gesture四个部分的总结和应用,以下demo需要用实体机测试。
1.触摸事件touch
touchstart 手指放在屏幕上触发
touchmove 手指在屏幕上移动,连续触发
touchend 手指离开屏幕触发
touchcancel 当系统停止跟踪时触发,当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作,即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。
注意:
移动端的事件会触发浏览器的默认行为,所以在调用事件的时候要把默认行为阻止了ev.preventDefault。

demo:
html 代码

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 触发当前事件的手指列表
clientX //触摸目标在视口中的X坐标。
clientY //触摸目标在视口中的Y坐标。
Identifier //标示触摸的唯一ID。
pageX //触摸目标在页面中的X坐标。
pageY //触摸目标在页面中的Y坐标。
screenX//触摸目标在屏幕中的X坐标。
screenY //触摸目标在屏幕中的Y坐标。
target // 触摸的DOM节点目标。
demo:
javascript 代码

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:显示重力加速度的值
javascript 代码

window.addEventListener(“devicemotion”, function(ev) {
varmotion=ev.accelerationIncludingGravity;
box.innerHTML=
“x:”+motion.x +”<br/>”+”y:”+motion.y +”<br/>”+”z:”+motion.z;
});

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

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

demo3:摇一摇应用原理javascript 代码

var box = document.getElementById(“box”);
var lastRange = 0; //上一次摇晃的幅度
var isShake = false; //决定用户到底有没有大幅度摇晃
window.addEventListener(“devicemotion”, function(ev) {
varmotion=ev.accelerationIncludingGravity;
varx=Math.abs(motion.x);
vary=Math.abs(motion.y);
varz=Math.abs(motion.z);
varrange=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:
javascript 代码

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

附:DeviceOrientation & DeviceMotion events浏览器兼容一览表

   [DeviceOrientation & DeviceMotion事件规范](https://www.w3.org/html/ig/zh/wiki/DeviceOrientation%E4%BA%8B%E4%BB%B6%E8%A7%84%E8%8C%83)

   使用这两个事件,能够实现重力感应、指南针等有趣的功能。

5.手势事件gesture
IOS的Safari还引入了一组手势事件。当两个手指触摸屏幕时就会产生手势,手势通常会改变显示项的大小,或者旋转显示项。有三个手势事件,分别如下:
gesturestart 当一个手指已经按在屏幕上,而另一个手指又触摸在屏幕时触发
gesturechange 当触摸屏幕的任何一个手指的位置发生改变的时候触发
gestureend 当任何一个手指从屏幕上面移开时触发
ev.rotation 表示手指变化引起的旋转角度,负值表示逆时针,正值表示顺时针,从0开始。
ev.scale 表示两个手指之间的距离情况,向内收缩会缩短距离,这个值从1开始,并随距离拉大而增长。
注意:
1.gesture事件目前只有 IOS 2.0以上支持,安卓的暂时没有支持。

2.一定要阻止浏览器的默认行为。[/color]
demo1:多指旋转
javascript 代码

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:多指缩放
javascript 代码

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;*/
varsc=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://www.rokub.com

» 本文来自:前端开发者 » 《移动端开发前端基础事件 【总结+应用】》
» 本文链接地址:https://www.rokub.com/3123.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!