JavaScriptでマウス操作時に座標を取得するプロパティをまとめて理解しよう

マウス操作時の座標を取得するプロパティ

clickイベントなど、マウス操作イベントが発生した時のイベントは1まとめにMouseEventオブジェクトと言われます。MouseEventオブジェクトにはイベント発生時の座標情報が含まれており、基準位置に応じた複数のプロパティが用意されております。

プロパティ

プロパティ意味
event.clientXブラウザーの左上を基準としたX座標数値
event.clientYブラウザーの左上を基準としたY座標数値
event.offsetX要素左上を基準としたX座標数値
event.offsetY要素左上を基準としたY座標数値
event.pageXページ左上を基準としたX座標数値
event.pageYページ左上を基準としたY座標数値
event.screenXデバイス左上を基準としたX座標数値
event.screenYデバイス左上を基準としたY座標数値
マウス座標を取得するイベント

サンプルコード

サンプルコードとして、現在のマウスカーソルの位置に対する各プロパティの値を出力するサンプルスクリプトを紹介します。

Output
event.clientX(ブラウザーの左上を基準としたX座標)
event.clientY(ブラウザーの左上を基準としたY座標)
event.offsetX(要素左上を基準としたX座標)
event.offsetY(要素左上を基準としたY座標)
event.pageX(ページ左上を基準としたX座標)
event.pageY(ページ左上を基準としたY座標)
event.screenX(デバイス左上を基準としたX座標)
event.screenY(デバイス左上を基準としたY座標)
Pug
.container.my-5
	.container.my-5
	div
		table.table
			tbody
				tr
					th event.clientX(ブラウザーの左上を基準としたX座標)
					td#targetText0 
				tr
					th event.clientY(ブラウザーの左上を基準としたY座標)
					td#targetText1
				tr
					th event.offsetX(要素左上を基準としたX座標)
					td#targetText2
				tr
					th event.offsetY(要素左上を基準としたY座標)
					td#targetText3
				tr
					th event.pageX(ページ左上を基準としたX座標)
					td#targetText4
				tr
					th event.pageY(ページ左上を基準としたY座標)
					td#targetText5
				tr
					th event.screenX(デバイス左上を基準としたX座標)
					td#targetText6
				tr
					th event.screenY(デバイス左上を基準としたY座標)
					td#targetText7
	
JavaScript
const targetText0 = document.getElementById( 'targetText0' );
const targetText1 = document.getElementById( 'targetText1' );
const targetText2 = document.getElementById( 'targetText2' );
const targetText3 = document.getElementById( 'targetText3' );
const targetText4 = document.getElementById( 'targetText4' );
const targetText5 = document.getElementById( 'targetText5' );
const targetText6 = document.getElementById( 'targetText6' );
const targetText7 = document.getElementById( 'targetText7' );

window.addEventListener('mousemove', () => {
	targetText0.textContent = event.clientX;
	targetText1.textContent = event.clientY;
	targetText2.textContent = event.offsetX;
	targetText3.textContent = event.offsetY;
	targetText4.textContent = event.pageX;
	targetText5.textContent = event.pageY;
	targetText6.textContent = event.screenX;
	targetText7.textContent = event.screenY;
});
インストラクター
コメント

コメントを残す