触屏中的JavaScript事件分析

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

一、触摸事件

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

实例如下：

/*** onTouchEvent*/var div = document.getElementById("div");//touchstart类似mousedowndiv.ontouchstart = function(e){//事件的touches属性是一个数组，其中一个元素代表同一时刻的一个触控点，//从而可以通过touches获取多点触控的每个触控点//由于我们只有一点触控，所以直接指向[0]var touch = e.touches[0];//获取当前触控点的坐标，等同于MouseEvent事件的clientX/clientYvar x = touch.clientX;var y = touch.clientY;};//touchmove类似mousemovediv.ontouchmove = function(e){//可为touchstart、touchmove事件加上preventDefault从而阻止触摸时，//浏览器的缩放、滚动条滚动等e.preventDefault();};//touchend类似mouseupdiv.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是放大，原始为1var 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事件与功能说明大全：

http://tools.VeVB.COm/table/javascript_event

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