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


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 相关文章推荐
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
浅谈js中对象的使用
Aug 11 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
vue 组件销毁并重置的实现
Jan 13 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
3
2006/10/09 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
PHP之短标签开启设置
2013/06/17 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
JavaScript 函数式编程的原理
2009/10/16 Javascript
javascript 内存回收机制理解
2011/01/17 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
python实现划词翻译
2020/04/23 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
Python编程求质数实例代码
2018/01/31 Python
Python实现一个优先级队列的方法
2020/07/31 Python
巴西在线鞋店:Shoestock
2017/10/28 全球购物
韩国商务邀请函
2014/01/14 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
教师产假请假条范文
2014/04/10 职场文书
2015年保管员工作总结
2015/04/30 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers