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


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 相关文章推荐
jQuery中RadioButtonList的功能及用法实例介绍
Aug 23 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
详解webpack+express多页站点开发
Dec 22 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
vue.config.js中配置Vue的路径别名的方法
Feb 11 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
微信小程序 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中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
JavaScript 变量基础知识
2009/11/07 Javascript
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
C#笔试题
2015/07/14 面试题
会计电算化个人自我评价
2013/11/17 职场文书
自荐信如何制作?
2014/02/21 职场文书
单位委托书怎么写
2014/08/02 职场文书
政风行风整改方案
2014/10/25 职场文书
2015幼儿园庆元旦活动方案
2014/12/09 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
Node.js实现断点续传
2021/06/23 Javascript
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS