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


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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
node.js require() 源码解读
Dec 13 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
turn.js异步加载实现翻书效果
Jul 25 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
Dec 06 Javascript
CocosCreator如何实现划过的位置显示纹理
Apr 14 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文件操作的详细诠释
2013/06/21 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
Python使用MONGODB入门实例
2015/05/11 Python
python连接字符串的方法小结
2015/07/13 Python
Python中for循环和while循环的基本使用方法
2015/08/21 Python
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
Python的pycurl包用法简介
2015/11/13 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
python-opencv颜色提取分割方法
2018/12/08 Python
Python2与Python3的区别实例总结
2019/04/17 Python
python之生产者消费者模型实现详解
2019/07/27 Python
详解Python3 pickle模块用法
2019/09/16 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
英国知名奢侈品包包品牌:Milli Millu
2016/12/22 全球购物
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
速比涛英国官网:Speedo英国
2019/07/15 全球购物
测绘工程本科生求职信
2013/10/10 职场文书
应聘教师自荐信
2013/10/12 职场文书
写求职信有什么意义
2014/02/17 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
孔庙导游词
2015/02/04 职场文书
求职自我评价范文
2015/03/09 职场文书
小学大队长竞选稿
2015/11/20 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
担保书范文
2019/07/09 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python
利用Python实现Picgo图床工具
2021/11/23 Python