javascript的Touch事件

標籤：eve   android   手勢   w3c   line   scroll   使用   改變   畫布   

js的touch事件，一般用於移動端的觸屏滑動

$(function(){document.addEventListener("touchmove", _touch, false);}) function _touch(event){alert(1);}

touchstart:當手指觸控螢幕幕時觸發；即使已經有一個手指放在了螢幕上也會觸發。touchmove:當手指在螢幕上滑動時連續的觸發。在這個事件發生期間，調用preventDefault()可阻止滾動。touchend:當手指從螢幕上移開時觸發。touchcancel:當系統停止跟蹤觸摸時觸發。關於此事件的確切觸發事件，文檔中沒有明確說明。

以上事件的event對象上面都存在如下屬性：

touches:表示當前跟蹤的觸摸操作的Touch對象的數組。targetTouches:特定於事件目標的Touch對象的數組。changeTouches:表示自上次觸摸以來發生了什麼改變的Touch對象的數組。

每個Touch對象包含下列屬性：

clientX:觸摸目標在視口中的X座標。clientY:觸摸目標在視口中的Y座標。identifier：表示觸摸的唯一ID。pageX：觸摸目標在頁面中的x座標。pageY：觸摸目標在頁面中的y座標。screenX:觸摸目標在螢幕中的x座標。screenY:觸摸目標在螢幕中的y座標。target:觸摸的DOM節點座標

觸摸事件

三種在規範中列出並獲得跨行動裝置廣泛實現的基本觸摸事件：
     1. touchstart：手指放在一個DOM元素上。
     2. touchmove：手指拖曳一個DOM元素。
     3. touchend：手指從一個DOM元素上移開。

每個觸摸事件都包括了三個觸摸列表：
     1. touches：當前位於螢幕上的所有手指的一個列表。
     2. targetTouches：位於當前DOM元素上的手指的一個列表。
     3. changedTouches：涉及當前事件的手指的一個列表

    例如，在一個touchend事件中，這就會是移開的手指。

這些列表由包含了觸摸資訊的對象組成：
     1. identifier：一個數值，唯一標識觸摸會話（touch session）中的當前手指。
     2. target：DOM元素，是動作所針對的目標。
     3. 客戶/頁面/螢幕座標：動作在螢幕上發生的位置。
     4. 半徑座標和 rotationAngle：畫出大約相當於手指形狀的橢圓形。

可觸控應用  

touchstart、touchmove和touchend事件提供了一組足夠豐富的功能來支援幾乎是任何類型的基於觸摸的互動——其中包括常見的多點觸摸手勢，比如說捏縮放、旋轉等待。    下面的這段代碼讓你使用單指觸摸來四處拖曳一個DOM元素：

 var obj = document.getElementByIdx_x_x_x_x_x_x(‘id‘); obj.addEventListener(‘touchmove‘, function(event)  { // 如果這個元素的位置內只有一個手指的話    if (event.targetTouches.length == 1)  {  var touch = event.targetTouches[0];   // 把元素放在手指所在的位置   obj.style.left = touch.pageX + ‘px‘;     obj.style.top = touch.pageY + ‘px‘;  }}, false);

下面是一個樣本，該例子顯示了螢幕上當前所有的觸點，它的作用就是用來感受一下裝置的響應性。

// 設定畫布並通過ctx變數來暴露上下文複製代碼 canvas.addEventListener(‘touchmove‘,    function(event) {    for (var i = 0; i < event.touches.length; i++) { var touch = event.touches;  ctx.beginPath();    ctx.arc(touch.pageX, touch.pageY, 20, 0, 2*Math.PI, true);    ctx.fill();    ctx.stroke();   }  }, false);

示範

      到處都有著許多有意思的多點觸摸示範，比如說這個由Paul Irish和其他人實現的基於畫布的繪畫示範。

      還有Browser Ninja，一個技術示範，是一個使用了CSS3的轉換、過渡和畫布的Fruit Ninja複製。

最佳做法

阻止縮放

     預設的多點觸摸設定不是特別的好用，因為你的滑動和手勢往往與瀏覽器的行為有關聯，比如說滾動和縮放。

     要禁用縮放功能的話，使用下面的元標記設定你的視圖區（viewport），這樣其對於使用者來說就是不可伸縮的了：
     content="width=device-width, initial-scale=1.0, user-scalable=no">
     看看這篇關於移動HTML 5的文章，瞭解更多關於視圖區設定的資訊。

阻止滾動

     一些行動裝置有預設的touchmove行為，比如說經典的iOS overscroll效果，當滾動超出了內容的界限時就引發視圖反彈。這種做法在許多多點觸控應用中會帶來混亂，但要禁用它很容易。

document.body.addEventListener(‘touchmove‘, function(event) {    event.preventDefault();   }, false); 

細心渲染

     如果你正在編寫的多點觸控應用涉及了複雜的多指手勢的話，要小心地考慮如何響應觸摸事件，因為一次要處理這麼多的事情。考慮一下前面一節中的在螢幕上畫出所有觸點的例子，你可以在有觸摸輸入的時候就立刻進行繪製：

 canvas.addEventListener(‘touchmove‘, function(event) {   renderTouches(event.touches);  },

    不過這一技術並不是要隨著螢幕上的手指個數的增多而擴充，替代做法是，可以跟蹤所有的手指，然後在一個迴圈中做渲染，這樣可獲得更好的效能：

var touches = []  canvas.addEventListener(‘touchmove‘, function(event) {    touches = event.touches;  }, false);  // 設定一個每秒60幀的定時器  timer = setInterval(function() {   renderTouches(touches);  }, 15);

     提示：setInterval不太適合於動畫，因為它沒有考慮到瀏覽器自己的渲染迴圈。現代的案頭瀏覽器提供了requestAnimationFrame這一函數，基於效能和電池工作時間原因，這是一個更好的選擇。一但瀏覽器提供了對該函數的支援，那將是首選的處理事情的方式。

使用targetTouches和changedTouches
    要記住的一點是，event.touches是與螢幕接觸的所有手指的一個數組，而不僅是位於目標DOM元素上的那些。你可能會發現使用 event.targetTouches和event.changedTouches來代替event.touches更有用一些。

    最後一點，因為你是在為行動裝置做開發，因此你應該要留心移動的最佳做法，這些在Eric Bidelman的文章中有論及，以及要瞭解這一W3C文檔。

裝置支援     

    遺憾的是，觸摸事件的實現在完備性和品質方面的差別很大。我編寫了一個診斷指令碼來顯示一些關於觸摸API實現的基本資料，其中包括哪些事件是支援的，以及 touchmove事件觸發的解決方案。我在Nexus One和Nexus S硬體上測試了Android2.3.3，在Xoom上測試了Android 3.0.1，以及在iPad和iPhone上測試了iOS 4.2。

    簡而言之，所有被測試的瀏覽器都支援touchstart、touchend和touchmove事件。

    規範提供了額外的三個觸摸事件，但被測試的瀏覽器沒有支援它們：
      1. touchenter：移動的手指進入一個DOM元素。
      2. toucheleave：移動手指離開一個DOM元素。
      3. touchcancel：觸摸被中斷（實現規範）。

     被測試的瀏覽器還在每個觸摸列表內部都提供了touches、targetTouches和changedTouches列表。不過，被測試的瀏覽器沒有支援radiusX、radiusY或是rotationAngle屬性，這些屬性指明觸控螢幕幕的手指的形狀。在一次touchmove期間，事件大約一秒鐘觸發60次，所有的被測試裝置都是這樣。

javascript的Touch事件