カーソルの位置を取得する

JavaScriptでカーソルの位置を取得する方法をメモ。

サンプルコード

カーソルの位置を取得する方法として、screenX/screenY・pageX/pageY・clientX/clientY・offsetX/offsetY があります。
mousemoveイベントでそれぞれの値を取得してみます。

HTML

<div class="control">
	<div>
	screenX: <span id="screenX"></span>
	screenY: <span id="screenY"></span>
	</div>
	<div>
	pageX: <span id="pageX"></span>
	pageY: <span id="pageY"></span>
	</div>
	<div>
	clientX: <span id="clientX"></span>
	clientY: <span id="clientY"></span>
	</div>
	<div>
	offsetX: <span id="offsetX"></span>
	offsetY: <span id="offsetY"></span>
	</div>
</div>

JavaScript

$(function() {
	$(window).on('mousemove', function(e) {
		$('#screenX').text(e.screenX);
		$('#screenY').text(e.screenY);

		$('#pageX').text(e.pageX);
		$('#pageY').text(e.pageY);

		$('#clientX').text(e.clientX);
		$('#clientY').text(e.clientY);

		$('#offsetX').text(e.offsetX);
		$('#offsetY').text(e.offsetY);
	});
});

カーソルの位置を取得するデモページ
それぞれで取得できる内容は以下の通りです。

pageX/pageYとclientX/clientYの違いが少しわかりにくいですが、デモページを下にスクロールすると、pageYとclientYの値が異なるのが分かるかと思います。
offsetX/offsetYの対象は要素になるので、このデモの場合はpageX/pageYと同じ結果になります。

先ほどのデモではwindowを対象にしましたが、次は特定の要素を対象にしてみます。

HTML

<div class="box"></div>

JavaScript

$(function() {
	$('.box').on('mousemove', function(e) {
		$('#screenX').text(e.screenX);
		$('#screenY').text(e.screenY);

		$('#pageX').text(e.pageX);
		$('#pageY').text(e.pageY);

		$('#clientX').text(e.clientX);
		$('#clientY').text(e.clientY);

		$('#offsetX').text(e.offsetX);
		$('#offsetY').text(e.offsetY);
	});
});

offsetX/offsetYが.boxの左上からの座標になっているのが確認できました。
カーソルの位置を取得するデモページ2
　

【参考サイト】

• jQuery： イベントが発生した時のマウス情報を取得するには？（イベントオブジェクト） – Build Insider
• 座標取得するプロパティのそれぞれの違い – 三等兵