触屏中的JavaScript事件分析


Posted in Javascript onFebruary 06, 2015

本文实例讲述了触屏中的JavaScript事件。分享给大家供大家参考。具体分析如下:

一、触摸事件

ontouchstart
ontouchmove
ontouchend
ontouchcancel目前移动端浏览器均支持这4个触摸事件,包括IE。由于触屏也支持MouseEvent,因此他们的顺序是需要注意的:touchstart → mouseover → mousemove → mousedown → mouseup → click1

实例如下:

/**
* onTouchEvent
*/
var div = document.getElementById("div");
//touchstart类似mousedown
div.ontouchstart = function(e){
//事件的touches属性是一个数组,其中一个元素代表同一时刻的一个触控点,
//从而可以通过touches获取多点触控的每个触控点
//由于我们只有一点触控,所以直接指向[0]
var touch = e.touches[0];
//获取当前触控点的坐标,等同于MouseEvent事件的clientX/clientY
var x = touch.clientX;
var y = touch.clientY;
};
//touchmove类似mousemove
div.ontouchmove = function(e){
//可为touchstart、touchmove事件加上preventDefault从而阻止触摸时,
//浏览器的缩放、滚动条滚动等
e.preventDefault();
};
//touchend类似mouseup
div.ontouchup = function(e){
//nothing to do
};

二、手势事件手势是指利用多点触控进行旋转、拉伸等操作,例如图片、网页的放大、旋转。需要两个或以上的手指同时触摸时才会触发手势事件。关于缩放我们需要注意的一点是元素的位置坐标:我们通常使用offsetX、getBoundingClientRect等方法获取元素的位置坐标,但在手机浏览器中页面经常会在使用中被缩放,那缩放后的元素坐标会改变吗?答案是有所差异。用一个情景来说明这个问题:页面A加载完成后,JavaScript获取到该元素在document中的坐标为(100,100),接着用户放大了页面,此时用JavaScript再次输出元素坐标,依然还是(100,100),但该元素在屏幕上的响应区域会根据缩放比例产生偏移。你可以打开那个打砖块游戏demo,等页面完全加载完成后,再放大,此时你会发现即使手指触摸在“touch here”区域外部,也可以控制到球板,因为区域发生了偏移。除非页面刷新或者恢复缩放,否则偏移量将一直存在。

/**
* onGestureEvent
*/
var div = document.getElementById("div");
div.ongesturechange = function(e){
//scale代表手势产生的缩放比例,小于1是缩小,大于1是放大,原始为1
var scale = e.scale;
//rotation代表旋转手势的角度,值区间[0,360],正值顺时针旋转,负值逆时针
var angle = e.rotation;
};

三、重力感应重力感应较简单,只需要为body节点添加onorientationchange事件即可。在此事件中由window.orientation属性得到代表当前手机方向的数值。window.orientation的值列表如下:

0:与页面首次加载时的方向一致
-90:相对原始方向顺时针转了90°
180:转了180°
90:逆时针转了90°据我测试,Android2.1尚未支持重力感应。以上即目前的触屏事件,这些事件尚未并入标准,但已被广泛使用。本人Android2.1,未在其他环境下测试。

PS:这里再为大家提供一个关于JS事件的在线工具,归纳总结了JS常用的事件类型与函数功能:

javascript事件与功能说明大全:

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
jquery实现增加删除行的方法
Feb 03 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
JavaScript中reduce()的用法
May 11 Javascript
JavaScript事件委托技术实例分析
Feb 06 #Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 #Javascript
JavaScript 异常处理 详解
Feb 06 #Javascript
jquery中change()用法实例分析
Feb 06 #Javascript
javaScript的函数对象的声明详解
Feb 06 #Javascript
javascript实用方法总结
Feb 06 #Javascript
javascript实现限制上传文件大小
Feb 06 #Javascript
You might like
优化使用mysql存储session的php代码
2008/01/10 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
PHP中PDO连接数据库中各种DNS设置方法小结
2016/05/13 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
jQuery textarea的长度进行验证
2009/05/06 Javascript
javascript数组去掉重复
2011/05/12 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
Python可迭代对象操作示例
2019/05/07 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
python实现多进程通信实例分析
2019/09/01 Python
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
为什么需要版本控制
2016/10/28 面试题
标准毕业生自荐信范文
2013/11/04 职场文书
关于中国梦的演讲稿
2014/04/23 职场文书
倡议书的写法
2014/08/30 职场文书
2014年实习期工作总结
2014/11/27 职场文书
2015年企业新年寄语
2014/12/08 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
社区低保工作总结2015
2015/07/23 职场文书
vue 自定义组件添加原生事件
2022/04/21 Vue.js