移動WEB開發之JS內置touch事件[轉]
iOS上的Safari也支持click 和mouseover等傳統的交互事件,只是不推薦在iOS的瀏覽器應用上使用click和mouseover,因為這兩個事件是為了支持鼠標點擊而設計 出來的。Click事件在iOS上會有半秒左右的延遲,原因是iOS要highlight接收到click的element。而 mouseover/out等事件則會被手指的點擊觸發。所以,在iOS上,應當拋棄傳統的交互事件模型而接受一個新的事件模型。Touch事件和更高級 的Gesture事件,能讓你的網頁交互起來像native應用一樣。
處理Touch事件能讓你跟蹤用戶的每一根手指的位置。你可以綁定以下四種Touch事件:
touchstart: 手指放到屏幕上的時候觸發
touchmove: 手指在屏幕上移動的時候觸發
touchend: 手指從屏幕上拿起的時候觸發
touchcancel: 系統取消touch事件的時候觸發。至於系統什麽時候會取消,不詳。。
Gesture事件則是對touch事件的更高級的封裝,主要處理手指slide、rotate、scale等動作,將在下一篇文章詳述。
在開始描述touch事件之前,需要先描述一下多觸式系統中特有的touch對象(android和iOS乃至nokia最新的meego系統都模擬了類 似的對象,這裏只針對iOS,因為我只有iPad可用於測試。。)。這個對象封裝一次屏幕觸摸,一般來自於手指。它在touch事件觸發的時候產生,可以 通過touch event handler的event對象取到(一般是通過event.changedTouches屬性)。這個對象包括一些重要的屬性:
client / clientY:觸摸點相對於瀏覽器窗口viewport的位置
pageX / pageY:觸摸點相對於頁面的位置
screenX /screenY:觸摸點相對於屏幕的位置
identifier: touch對象的unique ID
我們從一個單根手指觸摸的實例開始進入多觸式網頁的世界。當一根手指放下的時候,屏幕上出現一個方塊,手指移動方塊也隨著移動,手指提起方塊消失。首先,讓我們定義一下方塊的css:
- .spirit { / * 方塊的class名稱*/
- position: absolute;
- width: 50px;
- height: 50px;
- background-color: red;
- }
然後,在body下定義一個接收事件的容器,這裏body的height必須是100%才能占滿整個viewport:
- <body style=”height: 100%;margin:0;padding:0”>
- <div id=”canvas” style=”position: relative;width:100%;height: 100%;”></div>
- </body>
定義touchstart的事件處理函數,並綁定事件:
- // define global variable
- var canvas = document.getElementByIdx_x_x_x(“canvas”),
- spirit, startX, startY;
- // touch start listener
- function touchStart(event) {
- event.preventDefault();
- if (spirit ||! event.touches.length) return;
- var touch = event.touches[0];
- startX = touch.pageX;
- startY = touch.pageY;
- spirit = document_createElement_x_x_x(“div”);
- spirit.className = “spirit”;
- spirit.style.left = startX;
- spirit.style.top = startY;
- canvas.a(spirit);
- }
- // add touch start listener
- canvas.addEventListener(“touchstart”, touchStart, false);
首先,我們將方塊spirit作為一個全局對象,因為我們現在要測試單根手指所以屏幕上最好只有一個物體在移動(等會有多觸實例)。在 touchStart這個事件處理函數中,我們也首先判斷了是否已經產生了spirit,也就是是否已經有一個手指放到屏幕上,如果是,直接返回。
和傳統的event listener一樣,多觸式系統也會產生一個event對象,只不過這個對象要多出一些屬性,比如這裏的event.touches,這個數組對象獲得 屏幕上所有的touch。註意這裏的event.preventDefault(),在傳統的事件處理函數中,這個方法阻止事件的默認動作,觸摸事件的默 認動作是滾屏,我們不想屏幕動來動去的,所以先調用一下這個函數。我們取第一個touch,將其pageX/Y作為spirit創建時的初始位置。接下 來,我們創建一個div,並且設置className,left,top三個屬性。最後,我們把spirit對象a到容器中。這樣, 當第一根手指放下的時候,一個紅色的,50px見方的方塊就放到屏幕上了。
然後,我們要開始處理手指在屏幕上移動的事件:
- function touchMove(event) {
- event.preventDefault();
- if (!spirit || !event.touches.length) return;
- var touch = event.touches[0],
- x = touch.pageX – startX,
- y = touch.pageY – startY;
- spirit.style.webkitTransform = ‘translate(‘ + x + ‘px, ‘ + y + ‘px)‘;
- }
- Canvas.addEventListener(“touchmove”, touchMove, false);
在touch move listener中,我們使用webkit特有的css屬性:webkitTransform來移動方塊,這個屬性具體怎麽用請google之。建議構造 面向iOS設備的網頁的時候盡量使用webkit自己的特性,不但炫,更可以直接利用硬件來提高性能。
最後,我們處理touchend事件。手指提起的時候方塊從屏幕上移除。
- function touchEnd(event) {
- If (!spirit) return;
- canvas.removeChild(spirit);
- spirit = null;
- }
- canvas.addEventListener(“touchend”, touchEnd, false);
在你的ipad或者iphone上測試一下以上代碼。如果不出意外的話,一個完整的多觸式web程序就誕生了。。
這種事件處理模式雖然能夠滿足我們開發多觸式網頁應用的需求,但是start – move – end的流程有點繁瑣,能不能封裝一些常用的動作讓我們用一個event handler就能解決問題呢。沒錯,Gesture事件就是為了這個目的設計出來的,它封裝了手指的scale, slide, rotate等常用的動作。不過,下一章我們再來討論這個問題。。
附件是一個更加復雜一些的例子,每根手指放下的時候都會產生一個不同顏色的方塊,手指動的時候方塊跟著動,手指提起的時候方塊消失,請下載查看試用。
通過附件所包含的實例,我們可以看出一些較為隱蔽的特性。首先,這裏我們沒有再使用event.touches取所有touch的對象,而是使用 event.changedTouches這個數組,用來取得所有跟本次事件相關的touch。但是,這裏我發現一個奇怪的特性,不知道是我的ipad有 問題還是本來就是這樣,就是在有多根手指放在屏幕上的時候,如果提起一根手指,touchend事件的changedTouches中會包含所有手指的 touch對象,然後,其他幾根留在屏幕上的手指會重新觸發touchstart,並刷新所有的touch對象(identifier都不一樣了)。如果 這是一個所有設備都有的特性,那麽將給編程者帶來一些不便,不知道水果為啥要這麽處理。
對touch event的介紹我們點到為止,這裏給大家推薦兩篇文檔:
Safari dom additions reference: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariJSRef/Intro/Intro.html#//apple_ref/doc/uid/TP40001482-CH2g-BAJDAJAG
Safari web content guide:
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/Introduction/Introduction.html
移動WEB開發之JS內置touch事件[轉]