本文實(shí)例講述了觸屏中的JavaScript事件。分享給大家供大家參考。具體分析如下：

一、觸摸事件

ontouchstart
ontouchmove
ontouchend
ontouchcancel目前移動(dòng)端瀏覽器均支持這4個(gè)觸摸事件，包括IE。由于觸屏也支持MouseEvent，因此他們的順序是需要注意的：touchstart → mouseover → mousemove → mousedown → mouseup → click1

實(shí)例如下：

/**
* onTouchEvent
*/
var div = document.getElementById("div");
//touchstart類似mousedown
div.ontouchstart = function(e){
//事件的touches屬性是一個(gè)數(shù)組，其中一個(gè)元素代表同一時(shí)刻的一個(gè)觸控點(diǎn)，
//從而可以通過touches獲取多點(diǎn)觸控的每個(gè)觸控點(diǎn)
//由于我們只有一點(diǎn)觸控，所以直接指向[0]
var touch = e.touches[0];
//獲取當(dāng)前觸控點(diǎn)的坐標(biāo)，等同于MouseEvent事件的clientX/clientY
var x = touch.clientX;
var y = touch.clientY;
};
//touchmove類似mousemove
div.ontouchmove = function(e){
//可為touchstart、touchmove事件加上preventDefault從而阻止觸摸時(shí)，
//瀏覽器的縮放、滾動(dòng)條滾動(dòng)等
e.preventDefault();
};
//touchend類似mouseup
div.ontouchup = function(e){
//nothing to do
};

二、手勢事件手勢是指利用多點(diǎn)觸控進(jìn)行旋轉(zhuǎn)、拉伸等操作，例如圖片、網(wǎng)頁的放大、旋轉(zhuǎn)。需要兩個(gè)或以上的手指同時(shí)觸摸時(shí)才會(huì)觸發(fā)手勢事件。關(guān)于縮放我們需要注意的一點(diǎn)是元素的位置坐標(biāo)：我們通常使用offsetX、getBoundingClientRect等方法獲取元素的位置坐標(biāo)，但在手機(jī)瀏覽器中頁面經(jīng)常會(huì)在使用中被縮放，那縮放后的元素坐標(biāo)會(huì)改變嗎？答案是有所差異。用一個(gè)情景來說明這個(gè)問題：頁面A加載完成后，JavaScript獲取到該元素在document中的坐標(biāo)為(100,100)，接著用戶放大了頁面，此時(shí)用JavaScript再次輸出元素坐標(biāo)，依然還是(100,100)，但該元素在屏幕上的響應(yīng)區(qū)域會(huì)根據(jù)縮放比例產(chǎn)生偏移。你可以打開那個(gè)打磚塊游戲demo，等頁面完全加載完成后，再放大，此時(shí)你會(huì)發(fā)現(xiàn)即使手指觸摸在“touch here”區(qū)域外部，也可以控制到球板，因?yàn)閰^(qū)域發(fā)生了偏移。除非頁面刷新或者恢復(fù)縮放，否則偏移量將一直存在。

/**
* onGestureEvent
*/
var div = document.getElementById("div");
div.ongesturechange = function(e){
//scale代表手勢產(chǎn)生的縮放比例，小于1是縮小，大于1是放大，原始為1
var scale = e.scale;
//rotation代表旋轉(zhuǎn)手勢的角度，值區(qū)間[0,360]，正值順時(shí)針旋轉(zhuǎn)，負(fù)值逆時(shí)針
var angle = e.rotation;
};

三、重力感應(yīng)重力感應(yīng)較簡單，只需要為body節(jié)點(diǎn)添加onorientationchange事件即可。在此事件中由window.orientation屬性得到代表當(dāng)前手機(jī)方向的數(shù)值。window.orientation的值列表如下：

0：與頁面首次加載時(shí)的方向一致
-90：相對(duì)原始方向順時(shí)針轉(zhuǎn)了90°
180：轉(zhuǎn)了180°
90：逆時(shí)針轉(zhuǎn)了90°據(jù)我測試，Android2.1尚未支持重力感應(yīng)。以上即目前的觸屏事件，這些事件尚未并入標(biāo)準(zhǔn)，但已被廣泛使用。本人Android2.1，未在其他環(huán)境下測試。

PS：這里再為大家提供一個(gè)關(guān)于JS事件的在線工具，歸納總結(jié)了JS常用的事件類型與函數(shù)功能：

javascript事件與功能說明大全：

http://tools.jb51.net/table/javascript_event

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

最新評(píng)論