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


Posted in Javascript onJanuary 12, 2017

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 相关文章推荐
jscript之List Excel Color Values
Jun 13 Javascript
JavaScript 面向对象编程(1) 基础
May 18 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
jquery form 加载数据示例
Apr 21 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 Javascript
webpack 模块热替换原理
Apr 09 Javascript
JavaScript 类的封装操作示例详解
May 16 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 #Javascript
简单的渐变轮播插件
Jan 12 #Javascript
那些精彩的JavaScript代码片段
Jan 12 #Javascript
JavaScript实现星级评分
Jan 12 #Javascript
angular2倒计时组件使用详解
Jan 12 #Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 #Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 #Javascript
You might like
php实现约瑟夫问题的方法小结
2015/03/23 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
PHP基于GD库的图像处理方法小结
2016/09/27 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
重定向实现代码
2006/11/20 Javascript
ext实现完整的登录代码
2008/08/08 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
JavaScrip单线程引擎工作原理分析
2010/09/04 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
javascript打印html内容功能的方法示例
2013/11/28 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
利用Python进行异常值分析实例代码
2017/12/07 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
如何使用python进行pdf文件分割
2019/11/11 Python
python中p-value的实现方式
2019/12/16 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
最新的大学生找工作自我评价
2013/09/29 职场文书
委托证明书
2014/09/17 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
学籍证明模板
2015/06/18 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle