前言  

諸如智慧手機和平板電腦一類的移動裝置通常會有一（capacitive touch-sensitivescreen），以捕捉使用者的手指所做的互動。隨著行動網路的發展，其能夠支援越來越複雜的應用，web開發者需要一種方法來處理這些事件。例如，幾乎所有的快節奏遊戲都需要玩家一次按下多個按鈕，這種方式，在觸控式螢幕情況下，意味著多點觸控。

     Apple在iOS 2.0中引入了觸控事件API，Android正迎頭趕上這一事實標準，縮小差距。最近一個W3C工作組正合力制定這一觸控事件規範

     在本文深入研究iOS和Android裝置提供的觸控事件API，探索一下可以構建哪些型別的應用，給出一些最佳做法，並論及一些使得可觸控應用（touch-enabled application）的開發變得更加容易的有用技術。

觸控事件 

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

3. changedTouches：涉及當前事件的手指的一個列表。
     例如，在一個touchend事件中，這就會是移開的手指。

可觸控應用  
     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次，所有的被測試裝置都是這樣。

Android 2.3.3 (Nexus)
     Android的Gingerbread瀏覽器（在Nexus One和Nexus S上測試）不支援多點觸控，這是一個已知的問題。

Android 3.0.1 (Xoom)
      Xoom的瀏覽器對多點觸控有一個基本的支援，不過只能是在單個的DOM元素上起作用。瀏覽器不能正確響應同時發生在不同DOM元素上的兩處觸控，換句話說，下面的程式碼會對兩個同時發生的觸控的給出反應：複製程式碼

   obj1.addEventListener('touchmove', function(event) {

      for (var i = 0; i < event.targetTouches; i++) {

         var touch = event.targetTouches;

         console.log('touched ' + touch.identifier);

       }

    }, false);

但下面的程式碼則不會：複製程式碼

 var objs = [obj1, obj2];

 for (var i = 0; i < objs.length; i++) {

     var obj = objs;

     obj.addEventListener('touchmove', function(event) {

         if (event.targetTouches.length == 1) {

         console.log('touched ' +   

          event.targetTouches[0].identifier);

     }

  }, false);

}

iOS 4.x (iPad, iPhone)
     iOS裝置完全支援多點觸控，能夠跟蹤多個手指，並在瀏覽器中提供一個非常敏感的觸控體驗。

開發者工具 

     在移動開發中，一種較為容易的做法是，先在桌面上開始原型設計，然後再在打算要支援的裝置上處理移動特有的部分。多點觸控正是難以在PC上進行測試的那些功能之一，因為大部分的PC都沒有觸控輸入。

     不得不在移動裝置上進行的測試有可能會拉長你的開發週期，因為你所做的每項改變都需要提交程式碼到伺服器上，接著再載入到裝置上。然後，一旦執行後，對應用也就沒有太多的除錯了，因為平板電腦和智慧手機都很缺乏web開發者所用的工具。

     這個問題的一個解決方案是在開發機器上模擬觸發事件。對於單點觸控，觸控事件可以基於滑鼠事件來模擬。如果你有觸控輸入裝置的話，比如說現代的App MacBook，那麼多點觸控也可以被模擬。

單點觸控事件
     如果你想在桌面上模擬單點觸控事件的話，試一下Phantom Limb，該程式在網頁上模擬觸控事件並提供一隻巨手來引導。
     另外還有Touchable這一jQuery外掛，該外掛跨平臺地統一了觸控和滑鼠事件。

多點觸控事件
     為了能夠讓你的多點觸控web應用在你的瀏覽器或是多點觸控控板（比如說Apple MacBook或是MagicPad）上起作用，我建立了這一個MagicTouch.js填充工具，其捕捉來自觸控板的觸控事件，然後把它們轉換成標準相容的觸控事件。

     1. 下載npTuioClient NPAPI外掛並把它安裝到~/Library/Internet Plug-Ins/目錄下。
     2. 下載這一Mac MagicPad的TongSeng TUIO應用並啟動這一伺服器。
     3. 下載MagicTouch.js這一javascript庫來基於npTuioClient回撥模擬規範相容的觸控事件
     4. 以如下方式把magictouch.js指令碼和npTuioClient外掛包含到你的應用中：複製程式碼

< head>

   ...   

<script src="/path/to/magictouch.js" 

kesrc="/path/to/magictouch.js">< /script>

 < /head>

 < body>

 ...

 < object id="tuio" type="application/x-  tuio" style="width: 0px; height: 0px;">

 Touch input plugin failed to load!

  < /object>

 < /body>

       我只在Chrome 10上測試了這一方法，不過只要稍做調整它應該能夠在其他的現代瀏覽器上工作。

       如果你的計算機沒有多點觸控輸入的話，你可以使用其他的TUIO跟蹤器，比如

說reacTIVision來模擬觸控事件。欲瞭解更多資訊，請參閱TUIO專案頁面。

       需要注意的一點是，你的手勢可以是和OS層面的多點觸控手勢相同的。在OS X上，你可以通過進入System Preferences中的Trackpad偏好設定版面來配置系統範圍的事件。

       隨著多點觸控功能逐漸得到跨移動瀏覽器的的廣泛支援，我非常高興地看到新的web應用充分利用了這一豐富的API。

轉自http://blog.sina.com.cn/s/blog_97fd13ec01012k7e.html