為網頁加入多點觸控功能(IE10版)

之前曾以iPad為對象寫過 為網頁加入多點觸控功能範例，如今支援觸控的Windows 8筆電在手，不改寫成IE10版怎能止癢?

經過 簡單研究，大致整理IE10與Safari/Chrome觸控事件差異如下:

1. 事件名稱不同，IE使用的不是touchstart、touchmove、touchend等名稱，而是 MSPointerDown, MSPointerMove, MSPointerUp, MSPointerOver, MSPointerOut, MSPointerHover... 等。另外，還有高階的手勢事件: MSGestureTap, MSGestureHold, MSGestureStart, MSGestureChange, MSGestureEnd, MSInertiaStart，讓開發者不用自己費心追蹤各指座標變化，就能判定使用者正在縮放、旋轉動作，真是佛心來著，將來肯定要抽空玩一下才不會暴殄天物。
2. MSPointerDown等事件概念與touchstart也有所差異。在touchstart中會得到touches陣列，包含多個觸控點的資料；MSPointerDown則是個每個觸控點活動都會觸發一次。
3. 滑鼠也會觸發MSPointer*事件! 如只想對觸控產生反應，可用if (e.pointerType == e.MSPOINTER_TYPE_TOUCH)過濾。
4. 因為事件觸發基礎不同，原先在touchmove中可以透過changedTouches取得移動中的觸控點，使用IE10則要自行比對座標值該點是否在移動。
5. 要攔截觸控事件的元素需加上CSS設定: -ms-touch-action: none; 防止跟IE10預設的縮放、移動瀏覽等觸控操作打架。
6. 檢查navigator.msMaxTouchPoints屬性存在與否可偵測IE是否支援觸控，由navigator.msMaxTouchPoints亦可得到裝置所支援的觸控點數。

把握以上重點，經過簡單修改，支援IE10的多點觸控展示網頁就完成囉~ 線上展示

     
   
     content="width=device-width, initial-scale=1.0, user-scalable=no">
 
   
    
 
   
    
 
   
 
   
 
   
 
   
 
   
 
   
 
  

實測結果如下: (幸好最多只有10點，不然連腳都要舉起來"觸控"才能完成測試，肯定抽筋)