HTML5 觸摸事件

一。為什麼要用觸摸事件？##

觸摸事件是行動瀏覽器特有的 HTML5 事件，但這當然不是用觸摸事件的主要理由。因為行動端的 click 有很大延遲（大約 300ms），300ms 延遲來自判斷雙擊和長按，因為只有預設等待時間結束以確定沒有後續動作發生時，才會觸發 click 事件。而觸摸事件的延遲則是非常短的，使用觸摸事件能夠提高頁面回應速度，帶來更好的使用者體驗。

二。標準的觸摸事件##

Webkit 內的觸摸事件

事件名稱	描述	包含 touches 陣列
touchstart	觸摸開始（使用者把手指放在螢幕上）	是
touchmove	接觸點改變（使用者在螢幕上移動他的手指且手指不離開螢幕）	是
touchend	觸摸結束（使用者的手指離開螢幕）	是
touchcancel	觸摸被取消（觸摸被一些事情中斷，比如通知）	否

P.S. touches 陣列是觸摸物件陣列，觸摸物件攜帶著我們想要的資料

觸摸物件的屬性

屬性	描述
identifier	本次觸摸的唯一標識符，只要使用者的手指保持在螢幕上，這個值就不會改變
screenX	觸點相對於螢幕左側的距離
screenY	觸點相對於螢幕頂部的距離
clientX	觸點相對於瀏覽器視窗左側的距離
clientY	觸點相對於瀏覽器視窗頂部的距離
pageX	觸點相對於頁面左側的距離
pageY	觸點相對於頁面頂部的距離
target	獲取事件源，類似於 event.target

P.S. 其實還有三個屬性：radiusX/radiusY，rotationAngle，force 但由於相容性差且瀏覽器實作有差異，在此不做介紹

三.IE10 的觸摸事件##

IE 指標事件

事件名稱	描述（在觸摸裝置上）
MSPointerDown	觸摸開始
MSPointerMove	接觸點移動
MSPointerUp	觸摸結束
MSPointerOver	觸摸點移動到元素內，相當於 mouseover
MSPointerOut	觸摸點離開元素，相當於 mouseout

P.S. IE 叫指標事件，因為該事件有三種觸發形式：滑鼠單擊，電子筆輕觸和手指觸摸

MSPointerEvent 屬性

屬性	描述
hwTimestamp	建立事件的時間（ms）
isPrimary	標識該指標是不是主指標
pointerId	指標的唯一 ID（類似於觸摸事件的標識符）
pointerType	一個整數，標識了該事件來自滑鼠、手寫筆還是手指
pressure	筆的壓力，0-255，只有手寫筆輸入時才可用
rotation	0-359 的整數，游標的旋轉度（如果支援的話）
tiltX/tiltY	手寫筆的傾斜度，只有用手寫筆輸入時才支援

檢測 pointerType：

function handleEvent(event){
  switch(event.pointerType){
    case event.MSPOINTER_TYPE_TOUCH:
  //手指
  break;
case event.MSPOINTER_TYPE_PEN:
  //手寫筆
  break;
case event.MSPOINTER_TYPE_MOUSE:
  //滑鼠
  break;
 default:
   break;
  }
}
document.body.addEventListener("MSPointerDown", handleEvent, false);

其實還有一種更簡單的針對手指的檢測：直接判斷 touches 陣列是否存在，比如：

document.addEventListener('MSPointerDown', function(e){
  switch(e.type){
    case 'touchstart':var startPos = e.touches ? e.touches[0].pageX : e.screenX;
    //...
  }
}, false);

四。封裝好 tap 事件原始碼：（tap 即行動端的 click）##

(function(){

    var TOUCHSTART, TOUCHEND;

    //normal touch events
    if (typeof(window.ontouchstart) != 'undefined') {
    
        TOUCHSTART = 'touchstart';
        TOUCHEND   = 'touchend';
    
    //microsoft touch events
    } else if (typeof(window.onmspointerdown) != 'undefined') {
        TOUCHSTART = 'MSPointerDown';
        TOUCHEND   = 'MSPointerUp';
    } else {
        TOUCHSTART = 'mousedown';
        TOUCHEND   = 'mouseup';
    }


    function NodeFacade(node){
    
        this._node = node;
    
    }

    NodeFacade.prototype.getDomNode = function() {
        return this._node;
    }

    NodeFacade.prototype.on = function(evt, callback, scope) {
    
        var scopeObj;
    
        if(!scope) {
            scopeObj = this._node;
        } else{
            scopeObj = scope;
        }

    
        if (evt === 'tap') {
            this._node.addEventListener(TOUCHSTART, function() {
                callback.apply(scope, arguments);
            });
        } else if (evt === 'tapend') {
            this._node.addEventListener(TOUCHEND, function() {
                callback.apply(scope, arguments);
            });
        } else {
            this._node.addEventListener(evt, function() {
                callback.apply(scope, arguments);
            });
        }
    
        return this;
    
    }

    window.$ = function(selector) {

        var node = document.querySelector(selector);

        if(node) {
            return new NodeFacade(node);
        } else {
            return null;
        }
    }


})();

P.S. 以上原始碼來自 touch-interfaces.com

參考資料###

• 《HTML5 觸摸介面設計與開發》