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 という 3 つのプロパティもありますが、ブラウザ間の互換性が低く実装に差異があるため、ここでは紹介しません

三.IE10 のタッチイベント##

IE ポインターイベント

イベント名	説明（タッチデバイス上）
MSPointerDown	タッチ開始
MSPointerMove	接触点移動
MSPointerUp	タッチ終了
MSPointerOver	タッチポイントが要素内へ移動。mouseover に相当
MSPointerOut	タッチポイントが要素から離れる。mouseout に相当

P.S. IE ではポインターイベントと呼びます。このイベントには 3 つのトリガー形式（マウスクリック、スタイラスペン軽触、指タッチ）があるためです

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 タッチインターフェース設計と開発』