触屏中的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 相关文章推荐
很可爱的输入框
Aug 03 Javascript
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
js中settimeout方法加参数
Feb 28 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 Javascript
Node.js fs模块原理及常见用途
Oct 22 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
PHP生成二维码的两个方法和实例
2014/07/01 PHP
PHP安全上传图片的方法
2015/03/21 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
PHP实现简易计算器功能
2020/08/28 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
jQuery对象和DOM对象的相互转化实现代码
2010/03/02 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
python切换hosts文件代码示例
2013/12/31 Python
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
英国航空官网:British Airways
2016/09/11 全球购物
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
满月酒答谢词
2014/01/14 职场文书
幼儿生日活动方案
2014/08/27 职场文书
2014年个人总结范文
2015/03/09 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python