移动端基础事件总结与应用
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'; });
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
相关文章
- 这篇文章主要介绍了jQuery事件绑定用法,结合实例形式较为详细的分析了jQuery事件绑定的实现原理与相关注意事项,并附带了相关绑定方法的使用说明,重点介绍了bind和live的区别,需要的朋友可以参考下...2016-01-21
React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21- 瀑布流布局已成为当今非常普遍的图片展示方式,无论是PC还是手机等移动设备上。这种布局图片的样式大概分为三种:等高等宽、等宽不等高、等高不等宽,接下来我们就最为普遍的等宽不等高形式来作为示例。我们用百度图片作为...2015-10-30
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
这篇文章主要介绍了jQuery绑定事件监听bind和移除事件监听unbind用法,结合实例形式详细分析了绑定事件监听bind和移除事件监听unbind的具体使用技巧与相关注意事项,需要的朋友可以参考下...2016-01-21- 这篇文章主要为大家详细介绍了vue实现移动端input上传视频、音频,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-18
- 瀑布流布局已成为当今非常普遍的图片展示方式,无论是PC还是手机等移动设备上。这种布局图片的样式大概分为三种:等高等宽、等宽不等高、等高不等宽,接下来我们就最为普遍的等宽不等高形式来作为示例。我们用百度图片作为...2015-10-30
- 这篇文章主要介绍了Vue项目移动端滚动穿透问题的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-20
- 这篇文章主要为大家详细介绍了利用jmSlip编写移动端顶部日历选择组件的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-10-25
- 这篇文章主要介绍了微信小程序 事件的相关资料,并附实例代码,需要的朋友可以参考下...2016-10-20
- 这篇文章主要介绍了jQuery技巧之让任何组件都支持类似DOM的事件管理 的相关资料,需要的朋友可以参考下...2016-04-06
- 这篇文章主要介绍了HTML5实现移动端点击翻牌功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-12-08
- 这篇文章主要介绍了jQuery简单获取键盘事件的方法,涉及jQuery针对键盘事件的获取与响应技巧,需要的朋友可以参考下...2016-01-24
- 这篇文章主要介绍了vue移动端弹起蒙层滑动禁止底部滑动操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-22
- 下面小编就为大家带来一篇浅谈js键盘事件全面控制。小编觉得挺不错的,在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-12-02
- 这篇文章主要为大家详细介绍了基于javascript实现移动端上的触屏拖拽功能,感兴趣的小伙伴们可以参考一下...2016-03-07
- 这篇文章主要介绍了h5移动端调用支付宝、微信支付的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-30
- Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高,本文给大家介绍nodejs事件循环相关知识,对此感兴趣的朋友快来学习吧...2015-12-21
- 下面小编就为大家带来一篇JS创建事件的三种方法(实例代码)。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-05-14
- 这篇文章主要为大家详细介绍了移动端web滚动分页的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-09
- 下面小编就为大家带来一篇js事件驱动机制 浏览器兼容处理方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-07-29