JavaScript プログラミング講座

 

タッチイベントについて

 


■タッチイベントについて


タッチイベントを利用すると、タッチスクリーンによる入力を調べることができます。
 
モバイル向けの主要なブラウザで対応しています。
 
http://www.w3.org/TR/touch-events/ (Proposed Recommendation)
 

■タッチイベントに対応しているか調べる

 
タッチイベントに対応しているか調べるには、window.TouchEvent が真であるか比較します。
 
タッチイベントに対応しているか調べる

// タッチイベントに対応している
if(window.TouchEvent){

	alert("タッチイベントに対応している");

}else{

	alert("タッチイベントに対応していない");

}
 
 
 


■ TouchEvent インターフェースについて

 
TouchEvent インターフェスについては、こちらで解説しています。
 

■ TouchEvent インターフェースのプロパティについて

 
TouchEvent インターフェースには、以下の読み取り専用のプロパティがあります。
 
プロパティ名説明
touchesTouchList接地状態であるすべての Touch オブジェクトのリスト。
targetTouchesTouchListタッチを開始した DOM オブジェクトが同じとなる Touch オブジェクトだけを集めたリスト。
changedTouchesTouchList変化した Touch オブジェクトだけを集めたリスト。
ctrlKeyBooleanCtrl キーの押下状態を取得する。
shiftKeyBooleanShift キーの押下状態を取得する。
altKeyBooleanAlt キーの押下状態を取得する。
metaKeyBooleanMeta キーの押下状態を取得する。
 

■ TouchList インターフェースについて

 
TouchList オブジェクトは、配列のように中身を取り出せます。
 
TouchList オブジェクトの中には、「Touch オブジェクト」が格納されています。
 
「Touch オブジェクト」については、こちらで解説しています。
 
「Touch オブジェクト」の総数を取得するには、length プロパティを使用します。
 
変化した Touch オブジェクトを取得する

// タッチイベントに対応している
if(window.TouchEvent){

	// イベントリスナーに対応している
	if(document.addEventListener){

		// ------------------------------------------------------------
		// タッチすると実行される関数
		// ------------------------------------------------------------
		function TouchEventFunc(e){
			// TouchList オブジェクトを取得
			var touch_list = e.changedTouches;

			// 中身に順番にアクセス
			var i;
			var num = touch_list.length;
			for(i=0;i < num;i++){

				// Touch オブジェクトを取得
				var touch = touch_list[i];

				// 出力テスト
				console.log(touch);
			}
		}

		// ------------------------------------------------------------
		// リッスンを開始する
		// ------------------------------------------------------------
		// タッチを開始すると実行されるイベント
		document.addEventListener("touchstart",TouchEventFunc);

		// タッチしたまま平行移動すると実行されるイベント
		document.addEventListener("touchmove",TouchEventFunc);

		// タッチを終了すると実行されるイベント
		document.addEventListener("touchend",TouchEventFunc);
	}
}
 

■ Touch インターフェースについて

 
■ Touch インターフェースのプロパティについて
 
Touch インターフェースには、以下の読み取り専用のプロパティがあります。
 
プロパティ名説明
identifierNumberタッチを開始すると割り振られる、ユニーク(唯一)な識別番号。 (マルチタッチ用)
screenXNumberモニタのスクリーン領域の左上を原点とした x 座標を取得する。
screenYNumberモニタのスクリーン領域の左上を原点とした y 座標を取得する。
clientXNumberブラウザのクライアント領域の左上を原点とした x 座標を取得する。
clientYNumberブラウザのクライアント領域の左上を原点とした y 座標を取得する。
pageXNumberHTML 全体の左上を原点とした x 座標を取得する。
pageYNumberHTML 全体の左上を原点とした y 座標を取得する。
targetEventTargetイベントと関係する EventTarget オブジェクトを取得する。DOM オブジェクトなどが該当。
 


 

タッチスクリーン入力を取得する

 
 


■タッチ関連のイベントについて

 
タッチ関連のイベントは、以下の種類があります。
 
イベントリスナーを使って登録します。
 
イベント名 解説
"touchstart" TouchEvent タッチを開始すると実行されるイベント
"touchmove" TouchEvent タッチしたまま平行移動すると実行されるイベント
"touchend" TouchEvent タッチを終了すると実行されるイベント
"touchcancel" TouchEvent タッチ操作を中断させる処理が発生すると実行されるイベント(画面の自動回転など)
 
■タッチ操作の終了イベントについて
 
"touchcancel" イベントが発行された場合、"touchend" イベントは発行されません
 
タッチ操作の終了は、"touchend""touchcancel" の 2 箇所で監視する必要があります。
 

■任意の DOM オブジェクトにイベントリスナーを登録する

 
任意の DOM オブジェクトに、コールバック関数を登録します。
 
この場合、タッチと、DOM オブジェクトが重なっているときのみ、イベントが動作します。
 
エレメントにイベントリスナーを登録する

<html>
  <body>

    <div id="aaa" style="position:absolute; left:100px; top:100px; width: 400px; height: 400px; background:#fcc;"></div>

    <script type="text/javascript">
    <!--

	// タッチイベントに対応している
	if(window.TouchEvent){

		// イベントリスナーに対応している
		if(window.addEventListener){

			// ------------------------------------------------------------
			// タッチすると実行される関数
			// ------------------------------------------------------------
			function TouchEventFunc(e){
				console.log("タッチスクリーン入力された");
			}

			// ------------------------------------------------------------
			// リッスンを開始する
			// ------------------------------------------------------------
			// "aaa" という ID 属性のエレメントを取得する
			var element = document.getElementById("aaa");

			// タッチを開始すると実行されるイベント
			element.addEventListener("touchstart",TouchEventFunc);

			// タッチしたまま平行移動すると実行されるイベント
			element.addEventListener("touchmove",TouchEventFunc);

			// タッチを終了すると実行されるイベント
			element.addEventListener("touchend",TouchEventFunc);
		}
	}

    //-->
    </script>

  </body>
</html>
 

■タッチスクリーン入力を取得する

 
■TouchEvent オブジェクトを取得する
 
登録したコールバック関数の引数から、TouchEvent オブジェクトが得られます。
 
TouchEvent オブジェクトについては、こちらで解説しています。
 
■変化したタッチスクリーン入力だけを調べる
 
変化したタッチスクリーン入力だけを調べるには、changedTouches プロパティを使用します。
 
TouchList オブジェクトが取得できます。
 
TouchList オブジェクトは、配列のように中身を取り出せます。
 
TouchList オブジェクトの中には、Touch オブジェクトが格納されています。
 
TouchList オブジェクトについては、こちらで解説しています。
 
Touch オブジェクトについては、こちらで解説しています。
 
■マルチタッチ入力に対応する
 
マルチタッチに対応するには、identifier プロパティを使用します。
 
新規にタッチを開始すると、ユニーク(唯一)な識別番号が割り振られます。
 
タッチの終了までの間に、識別番号が変わる事はありません。
 
同じ識別番号の Touch オブジェクトを調べると、シングルタッチの変化を追跡する事ができます。
 
■取得例
 
タッチスクリーン入力を取得する

// タッチイベントに対応している
if(window.TouchEvent){

	// イベントリスナーに対応している
	if(document.addEventListener){

		// ------------------------------------------------------------
		// タッチすると実行される関数
		// ------------------------------------------------------------
		function TouchEventFunc(e){

			// イベント名を出力
			console.log("type:" + e.type);

			// TouchList オブジェクトを取得
			var touch_list = e.changedTouches;

			// 中身に順番にアクセス
			var i;
			var num = touch_list.length;
			for(i=0;i < num;i++){

				// Touch オブジェクトを取得
				var touch = touch_list[i];

				// 識別番号を取得
				console.log("id:" + touch.identifier);

				// モニタのスクリーン領域の左上を原点とした座標を取得
				console.log("screenX:" + touch.screenX);
				console.log("screenY:" + touch.screenY);

				// ブラウザのクライアント領域の左上を原点とした座標を取得
				console.log("clientX:" + touch.clientX);
				console.log("clientY:" + touch.clientY);

				// HTML 全体の左上を原点とした座標を取得
				console.log("pageX:" + touch.pageX);
				console.log("pageY:" + touch.pageY);

				console.log(" ----- ");
			}

			// キャンセルに対応している
			if(e.cancelable){
				// デフォルトのタッチ操作を無効化する
				e.preventDefault();
			}
		}

		// ------------------------------------------------------------
		// リッスンを開始する
		// ------------------------------------------------------------
		// タッチを開始すると実行されるイベント
		document.addEventListener("touchstart",TouchEventFunc);

		// タッチしたまま平行移動すると実行されるイベント
		document.addEventListener("touchmove",TouchEventFunc);

		// タッチを終了すると実行されるイベント
		document.addEventListener("touchend",TouchEventFunc);

		// タッチ操作を中断させる処理が発生すると実行されるイベント
		document.addEventListener("touchcancel",TouchEventFunc);
	}
}
 

 
 

デフォルトのタッチ操作を無効化する

 


■キャンセルに対応しているイベント

 
以下のイベントは、キャンセルに対応しています。
 
イベント名 キャンセルの対応
"touchstart"
"touchmove"
"touchend"
"touchcancel" ×
 

■デフォルトのタッチ操作を無効化する

 
デフォルトのタッチ操作を無効化するには、preventDefault() メソッドを使用します。
 
登録したコールバック関数の引数から得られる、TouchEvent オブジェクトから呼び出します。
 
デフォルトのタッチ操作を無効化する

// タッチイベントに対応している
if(window.TouchEvent){

	// イベントリスナーに対応している
	if(window.addEventListener){

		// ------------------------------------------------------------
		// タッチすると実行される関数
		// ------------------------------------------------------------
		function TouchEventFunc(e){
			// デフォルトのタッチ操作をキャンセルする
			e.preventDefault();
		}


		// ------------------------------------------------------------
		// リッスンを開始する
		// ------------------------------------------------------------
		// タッチを開始すると実行されるイベント
		document.addEventListener("touchstart",TouchEventFunc);

		// タッチしたまま平行移動すると実行されるイベント
		document.addEventListener("touchmove",TouchEventFunc);

		// タッチを終了すると実行されるイベント
		document.addEventListener("touchend",TouchEventFunc);

	}
}