触屏中的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 相关文章推荐
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
vscode调试node.js的实现方法
Mar 22 Javascript
vue商城中商品“筛选器”功能的实现代码
Jul 01 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
js面向对象编程OOP及函数式编程FP区别
Jul 07 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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
ExtJS GridPanel 根据条件改变字体颜色
2010/03/08 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python 运算符 供重载参考
2009/06/11 Python
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
曼城官方网上商店:Manchester City
2019/09/10 全球购物
户外拓展活动方案
2014/02/11 职场文书
师范生自荐信模板
2014/05/28 职场文书
小学中队长竞选稿
2015/11/20 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python