【JavaScript】デバイスでタッチした要素の位置を取得する方法

2021年6月12日 2021年6月23日

こんにちは！CODE CLUB965のKです！

今回は、JavaScriptでスマホやタブレットでタッチした要素の位置を取得する方法を書こうと思います。

タッチした位置を取得する

デバイスでタッチした位置を取得するには、eventオブジェクトのchangedTouches[0].pageX、changedTouches[0].pageYを使用します。

また、位置の取得には「絶対位置」と「相対位置」の2種類の位置座標があります。

それぞれ、サンプルのコードを紹介しながら解説したいと思います。

絶対位置

まずは、絶対位置です。
絶対位置の場合、取得できるのは、ページ全体の左上からの位置座標になります。

// タッチした絶対位置を取得する
document.body.addEventListener( "touchstart", function( event ) {
	var touchObject = event.changedTouches[0] ;

	var x = touchObject.pageX ;
	var y = touchObject.pageY ;
} ) ;

クリックした時の位置を取得するために、addEventListener()を使っってタッチイベントを設定します。

addEventListener()については、以下を参考にするといいと思います。
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

タッチイベントを設定したら、後は changedTouches[0].pageX と changedTouches[0].pageY を使って x座標とy座標を取得するだけです。

相対位置

要素内におけるクリック位置を知る場合は、相対位置になります。
例えば、

<div id="click_erea">
・・・
</div>

このようなdivタグで囲んだエリア内のクリック位置を取得したい場合、

// <div id="click_erea">...</div>の要素にタッチイベントを設定
document.getElementById( "target" ).addEventListener( "touchstart", function( event ) {
	var touchObject = event.changedTouches[0] ;
	var touchX = touchObject.pageX ;
	var touchY = touchObject.pageY ;

	// 要素の位置を取得
	var clientRect = this.getBoundingClientRect() ;
	var positionX = clientRect.left + window.pageXOffset ;
	var positionY = clientRect.top + window.pageYOffset ;

	// 要素内におけるタッチ位置を計算
	var x = touchX - positionX ;
	var y = touchY - positionY ;
} ) ;

解説すると、要素内におけるクリック位置を知るために、最初に解説した絶対位置を取得してから要素の位置を引くだけです。

これで相対位置がを取得できます。