触屏中的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 相关文章推荐
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
js列举css中所有图标的实现代码
Jul 04 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
纯javascript版日历控件
Nov 24 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
JS实现json数组排序操作实例分析
Oct 28 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/03/08 日漫
PHP学习之字符串比较和查找
2011/04/17 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
Bootstrap popover用法详解
2016/12/22 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
在Python中操作字符串之startswith()方法的使用
2015/05/20 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
解决python删除文件的权限错误问题
2018/04/24 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
冰淇淋开店创业计划书
2014/02/01 职场文书
主办会计岗位职责
2014/03/13 职场文书
旅游文化节策划方案
2014/06/06 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
董存瑞观后感
2015/06/11 职场文书
国庆节新闻稿
2015/07/17 职场文书
生产实习心得体会范文
2016/01/22 职场文书
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python
nginx之内存池的实现
2022/06/28 Servers