觸屏中的JavaScript事件分析_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.jb51.net/table/javascript_event

希望本文所述對大家的javascript程式設計有所協助。