media -o id3 tab view 集合 pad chm 訪問

處理Touch事件能讓你跟蹤用戶的每一根手指的位置。你可以綁定以下四種Touch事件： 1.touchstart: // 手指放到屏幕上的時候觸發 2.touchmove: // 手指在屏幕上移動的時候觸發 3.touchend: // 手指從屏幕上拿起的時候觸發 4touchcancel: // 系統取消touch事件的時候觸發。至於系統什麽時候會取消，不詳 屬性 1.client / clientY：// 觸摸點相對於瀏覽器窗口viewport的位置 2.pageX / pageY：// 觸摸點相對於頁面的位置 3.screenX /screenY：// 觸摸點相對於屏幕的位置 4.identifier： // touch對象的unique ID //touchstart事件 function touchSatrtFunc(e) { //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等 var touch = e.touches[0]; //獲取第一個觸點 var x = Number(touch.pageX); //頁面觸點X坐標 var y = Number(touch.pageY); //頁面觸點Y坐標 //記錄觸點初始位置 startX = x; startY = y; } //touchmove事件 function touchMoveFunc(e) { //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等 var touch = evt.touches[0]; //獲取第一個觸點 var x = Number(touch.pageX); //頁面觸點X坐標 var y = Number(touch.pageY); //頁面觸點Y坐標 var text = ‘TouchMove事件觸發：（‘ + x + ‘, ‘ + y + ‘）‘; //判斷滑動方向 if (x - startX != 0) { //左右滑動 } if (y - startY != 0) { //上下滑動 } }

Mobile Web前端開發系列: 事件處理（二）

(2012-08-07 15:16:42) 轉載▼

標簽： 雜談

分類： webapp

上篇文章我們講了html的基本事件，這篇文章我們著重講解下觸摸事件，觸摸事件觸發的條件是手指接觸屏幕、手指在屏幕上移動或者從屏幕上離開。 事件是觸摸的集合，它起始於手指初次放置在屏幕上，終止於最後一個手指離開屏幕。事件從開始到結束過程中的所有觸摸操作都存儲在相同事件的記錄中。

touch事件

touch事件可以分為單點觸摸和多點觸摸兩種，單點觸摸高端機一般都支持，Safari2.0、Android3.0以上的版本支持多點觸摸，支持最多5個手指同時觸摸屏幕，ipad最多支持11個手指同時觸摸屏幕， 我們可以采用以下的事件模型捕獲這些事件，

ontouchstart ontouchmove ontouchend ontouchcancel

當用戶按下手指在屏幕上，ontouchstart會被觸發，當用戶移動一個或多個手指的時候，ontouchmove會被觸發，當用戶移走手指， ontouchend被觸發。那什麽時候觸發ontouchcancel呢？當一些更高級別的事件發生的時候，例如，alert，有電話打來或者有 推送的消息提示的時候會取消當前的touch操作，即觸發ontouchcancel。當你在開發一個web game的時候，ontouchcancel 對你很重要，你可以在ontouchcancel觸發的時候暫停遊戲或者保存遊戲。

gesture事件

gesture事件的運行原理與touch事件相同，只是gesture事件僅當屏幕上存在至少兩個手指時觸發，所以Safari2.0、Android3.0以上版本支持， 手勢具備諸多優勢，可以幫助我們測量兩指放縮和旋轉操作，事件模型如下，

ongesturestart ongesturechange ongestureend

事件屬性

無論使用觸摸還是手勢事件，你都需要將這些事件轉換為單獨的觸摸來使用它們。為此，你需要訪問事件對象的一系列的屬性。

targetTouches 目標元素的所有當前觸摸 changedTouches 頁面上最新更改的所有觸摸 touches 頁面上的所有觸摸

changedTouches、targetTouches和touches分別包含稍微不同的觸摸列表。targetTouches和touches分別包含當前位於 屏幕上的手指列表，但changedTouches僅列出最後發生的觸摸。如果你在使用touchend或者gestureend事件，那麽這個屬性 非常重要。在這兩種情況下，屏幕上都不會再出現手指，因此targetTouches和touches應該為空，但你仍然可以通過查看 changedTouches數組來了解最後發生的事情。

由於觸摸屬性都會生成數組，因此你可以使用JavaScript數組函數來訪問它們。這意味著，event.touches[0]將返回第一次 觸摸，並且可以使用event.touches.length來計算當前存儲的觸摸數量。

查看單獨觸摸時，通過使用event.targetTouches[0],你也可以訪問其它觸摸，每個觸摸會包含一些具體信息，

clientX、clientY 相對於當前屏幕的X或Y位置 pageX、pageY 相對於整體頁面的X或Y位置 screenX、screenY 相對於用戶計算機屏幕的X或Y位置 identifier 事件的唯一標識符 target 生成觸摸的目標對象

手勢事件的事件對象會比普通觸摸事件多兩個屬性，

rotation 手指的旋轉角度 scale 放縮的值

JavaScript觸摸與手勢事件