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


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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
List Information About the Binary Files Used by an Application
Jun 18 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
Angular2使用Angular CLI快速搭建工程(一)
May 21 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 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 Socket 编程
2010/04/09 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
phpStorm2020 注册码
2020/09/17 PHP
form表单action提交的js部分与html部分
2014/01/07 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
使用Python的判断语句模拟三目运算
2015/04/24 Python
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
python实现多线程抓取知乎用户
2016/12/12 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
设置器与访问器的定义以及各自特点
2016/01/08 面试题
理想点亮人生演讲稿
2014/05/21 职场文书
欢迎家长标语
2014/10/08 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
SQL 聚合、分组和排序
2021/11/11 MySQL
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技