首頁 > 開發者 > 手機程式開發

移動WEB開發之JS內建touch事件[轉]

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：特性   global   startx   tde   開發   mouse   常用   事件模型   pagex   

 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：

Javascript代碼 
  1. .spirit {              / * 方塊的class名稱*/  
  2.   
  3.          position: absolute;  
  4.   
  5.          width: 50px;  
  6.   
  7.          height: 50px;  
  8.   
  9.          background-color: red;  
  10.   
  11. }  



    然後，在body下定義一個接收事件的容器，這裡body的height必須是100%才能佔滿整個viewport：

Html代碼 
  1. <body style=”height: 100%;margin:0;padding:0”>  
  2.   
  3. <div id=”canvas”  style=”position: relative;width:100%;height: 100%;”></div>  
  4.   
  5. </body>  



    定義touchstart的事件處理函數，並綁定事件：

Javascript代碼 
  1. // define global variable  
  2.   
  3. var canvas = document.getElementByIdx_x_x_x(“canvas”),  
  4.   
  5.        spirit, startX, startY;  
  6.   
  7. // touch start listener  
  8.   
  9. function touchStart(event) {  
  10.   
  11.          event.preventDefault();  
  12.   
  13.          if (spirit ||! event.touches.length) return;  
  14.   
  15.          var touch = event.touches[0];  
  16.   
  17.          startX = touch.pageX;  
  18.   
  19.          startY = touch.pageY;  
  20.   
  21.          spirit = document_createElement_x_x_x(“div”);  
  22.   
  23.          spirit.className = “spirit”;  
  24.   
  25.          spirit.style.left = startX;  
  26.   
  27.          spirit.style.top = startY;  
  28.   
  29.          canvas.a(spirit);  
  30.   
  31. }  
  32.   
  33. // add touch start listener  
  34.   
  35. 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見方的方塊就放到螢幕上了。

    然後，我們要開始處理手指在螢幕上移動的事件：

Javascript代碼 
  1. function touchMove(event) {  
  2.   
  3.          event.preventDefault();  
  4.   
  5.          if (!spirit || !event.touches.length) return;  
  6.   
  7.          var touch = event.touches[0],  
  8.   
  9.               x = touch.pageX – startX,  
  10.   
  11.                y = touch.pageY – startY;  
  12.   
  13.          spirit.style.webkitTransform = ‘translate(‘ + x + ‘px, ‘ + y + ‘px)‘;       
  14.   
  15. }  
  16.   
  17. Canvas.addEventListener(“touchmove”, touchMove, false);  



    在touch move listener中，我們使用webkit特有的css屬性：webkitTransform來移動方塊，這個屬性具體怎麼用請google之。建議構造 面向iOS裝置的網頁的時候盡量使用webkit自己的特性，不但炫，更可以直接利用硬體來提高效能。

    最後，我們處理touchend事件。手指提起的時候方塊從螢幕上移除。

Javascript代碼 
  1. function touchEnd(event) {  
  2.   
  3.          If (!spirit) return;  
  4.   
  5.          canvas.removeChild(spirit);  
  6.   
  7.          spirit = null;  
  8.   
  9. }  
  10.   
  11. 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事件[轉]

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More