W3G

タッチ操作のイベント比較

新たにペン入力を含めた総合的なポインタイベントは従来のデスクトップのマウスイベント、タブレットやスマートフォンのタッチイベントと同じように使えるので、基本的にはイベント名を変えるだけで対応はできます。それぞれに相当するイベントは次のようにまとめることができます。

UAが各イベントに対応しているかどうか

var _ua = (function(){
 return {
  Touch:typeof document.ontouchstart != "undefined",
  Pointer:window.navigator.pointerEnabled,
  MSPoniter:window.navigator.msPointerEnabled
 }
})();

UAがタッチイベントをサポートしているかどうかはdocument.ontouchstartがundefinedを返さないことを条件にし、ポインタイベントをサポートしているかどうかは、navigator.pointerEnabled（windowオブジェクトは省略可）を用います。なおIE10は先攻実装のため、ベンダー識別子を用いる必要があります。

対応するイベント名を割り当てる

先の比較表に応じて、必要なイベントをわかりやすい変数名に格納して使うようにすると良いでしょう。フリック操作であれば、pointerdown, pointermove, pointerupに応じた他のマウスとタッチのイベントを割り当てます。

var _start = _ua.Pointer ? 'pointerdown' : _ua.MSPointer ? 'MSPointerDown' : _ua.Touch ? 'touchstart' : 'mousedown';
var _move  = _ua.Pointer ? 'pointermove' : _ua.MSPointer ? 'MSPointerMove' : _ua.Touch ? 'touchmove' : 'mousemove';
var _end   = _ua.Pointer ? 'pointerup' : _ua.MSPointer ? 'MSPointerUp' : _ua.Touch ? 'touchend' : 'mouseup';

• 変数_startにUAの対応状況に応じて順にpointerdown, MSPointerDown, touchstart, mousedownのいずれかのイベント名が格納されるようにします。
• 変数_moveにUAの対応状況に応じて順にpointermove, MSPointerMove, touchmove, mousemoveのいずれかのイベント名が格納されるようにします。
• 変数_endにUAの対応状況に応じて順にpointerup, MSPointerUp, touchend, mouseupのいずれかのイベント名が格納されるようにします。

デフォルトの挙動を無効化しておく

#target {
	-ms-touch-action : none ; /* for *IE10 */
	touch-action : none ;
}

タッチデバイスは、タッチしながら画面をスクロールしたり、二本の指でピンチ操作やストレッチ操作を行うとページ全体を縮小したり拡大したりしますが、タッチ操作を扱うコンテンツにおいては、このデフォルトの挙動が邪魔をします。そのため、これらの既定のタッチ処理をCSSで無効にする必要があります。この設定をしておかないと、ポインタイベントでタッチ操作を意図通りに扱うことができなくなります（ポインタイベントが正常に発生しない）ので、注意してください。

touch-actionプロパティは、IE11よりサポートしています。IE10では、ベンダー識別子つきの-ms-touch-actionプロパティを用います。

各イベントを設定する

var _target = $('#target');
//変数_startに格納されたイベント
_target.on(_start, function(e){
	var point  = e.originalEvent.changedTouches ? e.originalEvent.changedTouches[0] : e;
	var startX = point.pageX;
	var startY = point.pageY;
	var setX   = 0;
	var setY   = 0;
	//変数_moveに格納されたイベント
	_target.on(_move, function(e){
		point	= e.originalEvent.changedTouches ? e.originalEvent.changedTouches[0] : e;
		setX = point.pageX - startX;
		setY = point.pageY - startY;
		if(Math.abs(setX) > 5){
			//for Android
			e.preventDefault();
			e.stopPropagation();
		}else if(Math.abs(setY) > 5){
			//縦スクロール時
			return;
		}
		/*
		  フリック中の処理
		*/
	});
	//変数_endに格納されたイベント
	//このイベントは対象要素ではなく、documentを対象にする
	$(document).on(_end, function(e){
		point	= e.originalEvent.changedTouches ? e.originalEvent.changedTouches[0] : e;
		setX = point.pageX - startX;
		setY = point.pageY - startY;
		if(setX < -5){
			/*
			  左にフリックされた場合の処理
			*/
		}else if(setX > 5){
			/*
			  右にフリックされた場合の処理
			*/
		}
		//最後にイベントを削除
		_target.off(_move);
		$(document).off(_end);
	});
});

point = e.originalEvent.changedTouches ? e.originalEvent.changedTouches[0] : e;は、タッチイベントから座標を取得するには、changedTouchesプロパティから取得する必要があり、またjQueryを用いているのであわせてoriginalEventオブジェクトにアクセスする必要があります。そこで、e.originalEvent.changedTouchesが存在するかどうかで座標を取得するための変数pointにタッチイベント用の座標とマウスイベント&ポインタイベント用の座標とをわけて格納できるようにします。

_moveに格納されたイベントの中でAndroidではtouchmove中にe.preventDefault();を設定しなければ、touchendが正常に発生しません。ただし、縦スクロールまでを無効化してしまうため、X軸方向にフリックされているMath.abs(setX) > 5を条件にe.preventDefault();を設定するようにします。

マウス・タッチ・ペンの検出

if(_ua.Pointer || _ua.MSPointer){
	if( e.pointerType == "mouse"||4 ) {
		/*マウスの場合*/
	}else if( e.pointerType == "touch"||2 ) {
		/*タッチの場合*/
	}else if( e.pointerType == "pen"||3 ) {
		/*ペンの場合*/
	}
}

pointerTypeプロパティを用いて、ポインタイベントのイベントソースがマウスかタッチかペンかを検出できます。勧告候補仕様では、mouse, touch, penの文字列を返しますが、先攻実装のIE10ではマウスの場合は4, タッチの場合は2, ペンの場合は3の整数値を返します。

if( window.navigator.maxTouchPoints && window.navigator.maxTouchPoints > 1) {
 ...
}

参考リソース

• Internet Explorer 11 開発者向けガイド：ポインター イベントの更新
• Internet Explorer MVP による IE Test Drive 技術解説 : Pointer イベント