【JavaScript】クリックした位置を取得する方法

2021年6月20日 2021年6月21日

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

今回は、JavaScriptで画面をクリックしたときの位置を取得する方法について書こうと思います。

位置を取得する方法

クリックした位置を取得するには、eventオブジェクトのpageX、pageYを使用します。

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

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

絶対位置

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

// クッリクした絶対位置を取得する
document.body.addEventListener( "click", function( event ) {
	var x = event.pageX ;
	var y = event.pageY ;
} ) ;

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

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

クッリクイベントを設定したら、後は pageX と pageY を使って x座標とy座標を取得するだけです。

相対位置

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

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

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

// <div id="click_erea">...</div>の要素にクリックイベントを設定
document.getElementById( "click_erea" ).addEventListener( "click", function( event ) {
	var click_x = event.pageX ;
	var click_y = event.pageY ;

	// 要素の位置を取得
	var client_rect = this.getBoundingClientRect() ;
	var position_x = client_rect.left + window.pageXOffset ;
	var position_y = client_rect.top + window.pageYOffset ;

	// 要素内におけるクリック位置を計算
	var x = click_x - position_x ;
	var y = click_y - position_y ;
} ) ;

こう書けば相対位置が取得できます。

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

これで相対位置が分かります。