移动端基础事件总结与应用
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+'<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';
});
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要介绍了谈谈为什么你的 JavaScript 代码如此冗长，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
动态加载脚本可以有效提升javascript性能，下面有个不错的示例，大家可以参考下2014-02-02
这篇文章主要为大家详细介绍了原生js实现简易抽奖系统，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
今天小编就为大家分享一篇浅谈layui框架自带分页和表格重载的接口解析问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
闭包是ECMAScript一个很重要的特征，但是却很难用合适的定义来描述它。虽然闭包很难清晰地描述，但是，却很容易创建，或者说，不小心创建。然而，闭包的存在其实是有一定的潜在问题的。为了避免“不小心”地创建闭包，以及更好地利用闭包的优点，有必要理解闭包的机制2013-11-11
下面小编就为大家带来一篇无缝滚动的简单实现代码(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
本文主要介绍了JS调用Android、Ios通信的相同点和不同点，以便帮助我们在进行混合式开发时，提高代码质量，实现两者在网页端代码的统一。下面跟着小编一起来看下吧2017-01-01
如果想创建一个含有数字、字母（大小写）或者符号的字符串，比如从[a-zA-Z0-9]集合中中创建一个随机的字符串，长度为5.有没有什么比较好的代码呢？本文提供了几种方法，包括自动改变字符集合。一起来学习下。2016-08-08
这篇文章主要介绍了JS实现的简洁二级导航菜单雏形效果,通过简单的JavaScript响应鼠标事件遍历页面元素实现二级导航菜单切换的效果,非常简单实用,需要的朋友可以参考下2015-10-10
今天小编就为大家分享一篇select2 ajax 设置默认值,初始值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论