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

touchstart:當(dāng)手指觸摸屏幕時觸發(fā)；即使已經(jīng)有一個手指放在了屏幕上也會觸發(fā)。
touchmove:當(dāng)手指在屏幕上滑動時連續(xù)的觸發(fā)。在這個事件發(fā)生期間，調(diào)用preventDefault()可阻止?jié)L動。
touchend:當(dāng)手指從屏幕上移開時觸發(fā)。
touchcancel:當(dāng)系統(tǒng)停止跟蹤觸摸時觸發(fā)。關(guān)于此事件的確切觸發(fā)事件，文檔中沒有明確說明。

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

touches:表示當(dāng)前跟蹤的觸摸操作的Touch對象的數(shù)組。
targetTouches:特定于事件目標(biāo)的Touch對象的數(shù)組。
changeTouches:表示自上次觸摸以來發(fā)生了什么改變的Touch對象的數(shù)組。

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

clientX:觸摸目標(biāo)在視口中的X坐標(biāo)。
clientY:觸摸目標(biāo)在視口中的Y坐標(biāo)。
identifier：表示觸摸的唯一ID。
pageX：觸摸目標(biāo)在頁面中的x坐標(biāo)。
pageY：觸摸目標(biāo)在頁面中的y坐標(biāo)。
screenX:觸摸目標(biāo)在屏幕中的x坐標(biāo)。
screenY:觸摸目標(biāo)在屏幕中的y坐標(biāo)。
target:觸摸的DOM節(jié)點坐標(biāo)

觸摸事件

三種在規(guī)范中列出并獲得跨移動設(shè)備廣泛實現(xiàn)的基本觸摸事件：
     1. touchstart：手指放在一個DOM元素上。
     2. touchmove：手指拖曳一個DOM元素。
     3. touchend：手指從一個DOM元素上移開。

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

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

這些列表由包含了觸摸信息的對象組成：
     1. identifier：一個數(shù)值，唯一標(biāo)識觸摸會話（touch session）中的當(dāng)前手指。
     2. target：DOM元素，是動作所針對的目標(biāo)。
     3. 客戶/頁面/屏幕坐標(biāo)：動作在屏幕上發(fā)生的位置。
     4. 半徑坐標(biāo)和 rotationAngle：畫出大約相當(dāng)于手指形狀的橢圓形。

可觸控應(yīng)用  

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

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

      下面是一個示例，該例子顯示了屏幕上當(dāng)前所有的觸點，它的作用就是用來感受一下設(shè)備的響應(yīng)性。

   // 設(shè)置畫布并通過ctx變量來暴露上下文復(fù)制代碼
 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和其他人實現(xiàn)的基于畫布的繪畫演示。

      還有Browser Ninja，一個技術(shù)演示，是一個使用了CSS3的轉(zhuǎn)換、過渡和畫布的Fruit Ninja克隆。

最佳做法

阻止縮放

     缺省的多點觸摸設(shè)置不是特別的好用，因為你的滑動和手勢往往與瀏覽器的行為有關(guān)聯(lián)，比如說滾動和縮放。

     要禁用縮放功能的話，使用下面的元標(biāo)記設(shè)置你的視圖區(qū)（viewport），這樣其對于用戶來說就是不可伸縮的了：
     content="width=device-width, initial-scale=1.0, user-scalable=no">
     看看這篇關(guān)于移動HTML 5的文章，了解更多關(guān)于視圖區(qū)設(shè)置的信息。

阻止?jié)L動

     一些移動設(shè)備有缺省的touchmove行為，比如說經(jīng)典的iOS overscroll效果，當(dāng)滾動超出了內(nèi)容的界限時就引發(fā)視圖反彈。這種做法在許多多點觸控應(yīng)用中會帶來混亂，但要禁用它很容易。

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

細心渲染

     如果你正在編寫的多點觸控應(yīng)用涉及了復(fù)雜的多指手勢的話，要小心地考慮如何響應(yīng)觸摸事件，因為一次要處理這么多的事情?？紤]一下前面一節(jié)中的在屏幕上畫出所有觸點的例子，你可以在有觸摸輸入的時候就立刻進行繪制：

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

    不過這一技術(shù)并不是要隨著屏幕上的手指個數(shù)的增多而擴充，替代做法是，可以跟蹤所有的手指，然后在一個循環(huán)中做渲染，這樣可獲得更好的性能：

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

     提示：setInterval不太適合于動畫，因為它沒有考慮到瀏覽器自己的渲染循環(huán)。現(xiàn)代的桌面瀏覽器提供了requestAnimationFrame這一函數(shù)，基于性能和電池工作時間原因，這是一個更好的選擇。一但瀏覽器提供了對該函數(shù)的支持，那將是首選的處理事情的方式。

使用targetTouches和changedTouches
    要記住的一點是，event.touches是與屏幕接觸的所有手指的一個數(shù)組，而不僅是位于目標(biāo)DOM元素上的那些。你可能會發(fā)現(xiàn)使用 event.targetTouches和event.changedTouches來代替event.touches更有用一些。

    最后一點，因為你是在為移動設(shè)備做開發(fā)，因此你應(yīng)該要留心移動的最佳做法，這些在Eric Bidelman的文章中有論及，以及要了解這一W3C文檔。

設(shè)備支持     

    遺憾的是，觸摸事件的實現(xiàn)在完備性和質(zhì)量方面的差別很大。我編寫了一個診斷腳本來顯示一些關(guān)于觸摸API實現(xiàn)的基本信息，其中包括哪些事件是支持的，以及 touchmove事件觸發(fā)的解決方案。我在Nexus One和Nexus S硬件上測試了Android2.3.3，在Xoom上測試了Android 3.0.1，以及在iPad和iPhone上測試了iOS 4.2。

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

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

     被測試的瀏覽器還在每個觸摸列表內(nèi)部都提供了touches、targetTouches和changedTouches列表。不過，被測試的瀏覽器沒有支持radiusX、radiusY或是rotationAngle屬性，這些屬性指明觸摸屏幕的手指的形狀。在一次touchmove期間，事件大約一秒鐘觸發(fā)60次，所有的被測試設(shè)備都是這樣。

最新評論