JavaScript プログラミング講座


タッチスクリーン操作について



・タッチイベントについて
・タッチスクリーン入力を取得する
・デフォルトのタッチ操作を無効化する

前のページに戻る

　

タッチイベントについて

　


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


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

■ブラウザがタッチイベントに対応しているか調べる

　
window.TouchEvent が真であるか比較します。
　
　
　


■ 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);

	}
}
　

上に戻る
　
　
前のページに戻る