JavaScript

最終更新日：
公開日：

レシピ

イベント

タッチ（タップ）したときの位置座標を取得する

スマホやタブレットなどの端末で、タッチ操作があった場合にタッチされた場所の位置情報を取得する方法を解説します。

この記事のポイント

  • 基本的な位置座標の起点はマウスカーソルと同様
  • タッチ操作はchangedTouchesプロパティから位置座標を参照する
  • 特定のHTML要素を起点にしたいときはマウスのイベントを使う

目次

タッチした位置の座標は3種類の起点がある

タッチ操作に対応した端末でタッチがあるとイベント「touchend」を使うことができますが、このイベントを使うと次のようにタッチされた位置の座標を取得することができます。

タッチの位置座標はtouchEventオブジェクトのchangedTouchesプロパティの中に含まれる以下のプロパティを参照することで、それぞれ起点の異なる位置座標を取得することができます。

座標の起点プロパティ名
端末のディスプレイscreenX、screenY
ブラウザの表示エリアclientX、clientY
ページ先頭pageX、pageY

位置座標の起点の考え方はマウスカーソルの位置座標と同じです。
それぞれの起点の違いについて詳しくは「マウスカーソルの位置座標を取得する」を参照してください。

以下のコードはそれぞれのプロパティを参照して出力します。

changedTouchesプロパティは配列になっていて、同時にタッチされたポイント（指）の数がそのまま配列になります。
通常のタッチ操作は1本の指で行われることを想定するため、以下のコードでは配列の先頭である「0」を参照しています。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GRAYCODE JavaScript</title>
	<script>
		window.addEventListener('load', function(){
			document.getElementById("content1").addEventListener('touchend', logPosition);
		});

		function logPosition(event) {

			if( event.changedTouches[0] ) {

				// ディスプレイ
				console.log("screenX: " + event.changedTouches[0].screenX);
				console.log("screenY: " + event.changedTouches[0].screenY);

				// ブラウザ
				console.log("clientX: " + event.changedTouches[0].clientX);
				console.log("clientY: " + event.changedTouches[0].clientY);

				// ページ
				console.log("pageX: " + event.changedTouches[0].pageX);
				console.log("pageY: " + event.changedTouches[0].pageY);
			}
		}
	</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<section id="content1"></section>
</body>
</html>

コードではまず、以下の箇所でページが読み込まれたタイミングでイベントリスナーにsection要素がタッチされたらlogPositionメソッドを実行するように設定しています。
ここではイベントはtouchendを使用していますが、touchstartでも同じことができます。

イベントリスナーの設定

window.addEventListener('load', function(){
	document.getElementById("content1").addEventListener('touchend', logPosition);
});

続いてlogPositionメソッドのコードですが、if文の条件式でchangedTouchesプロパティが渡されているかを確認します。
その中ではシンプルにconsole.logメソッドでそれぞれのプロパティを出力して完了です。

changedTouchesプロパティを確認

function logPosition(event) {

	if( event.changedTouches[0] ) {

		// ディスプレイ
		console.log("screenX: " + event.changedTouches[0].screenX);
		console.log("screenY: " + event.changedTouches[0].screenY);

		// ブラウザ
		console.log("clientX: " + event.changedTouches[0].clientX);
		console.log("clientY: " + event.changedTouches[0].clientY);

		// ページ
		console.log("pageX: " + event.changedTouches[0].pageX);
		console.log("pageY: " + event.changedTouches[0].pageY);
	}
}

特定のHTML要素を起点とするケースの対応

changedTouchesプロパティは特定のHTMLを起点とする位置座標を取得することはできません。
しかし、マウスカーソルの位置座標を参照できるMouseEventオブジェクトでは特定のHTML要素を起点とする位置座標offsetXプロパティとoffsetYプロパティを参照することができます。

そこで、もし特定のHTML要素を起点とした位置座標を取得したい場合については、イベントをマウスと同じ「click」に変更します。
これでタッチ操作でも同様の値を取得することができるようになります。

以下のコードではイベントをtouchendからclickに変更して、section要素を起点にした座標を出力します。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GRAYCODE JavaScript</title>
	<script>
		window.addEventListener('load', function(){
			document.getElementById("content1").addEventListener('click', logPosition);
		});

		function logPosition(event) {
			console.log("offsetX: " + event.offsetX);
			console.log("offsetY: " + event.offsetY);
		}
	</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<section id="content1"></section>
</body>
</html>

イベントclickはtouchendと同様にscreenXやclientX、pageXも参照できます。

関連記事

前のページへ 一覧に戻る 次のページへ