觸控螢幕中的JavaScript事件分析_javascript技巧

本文實例講述了觸控螢幕中的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，未在其他環境下測試。

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