マウスカーソルの相対座標を取得

マウスカーソルの相対座標を取得するには、イベントオブジェクトのevent.clientXプロパティまたはevent.clientYプロパティを使用します。
水平(左右)の座標はevent.clientXプロパティ、垂直(上下)の座標はevent.clientYプロパティでそれぞれ取得できます。

得られる座標はページの表示領域内での座標であって、ページ全体の座標ではありません。
つまり、スクロールが発生しページの表示領域外は座標に含まれません。
表示領域外(スクロール範囲を含む)も取得するには、マウスカーソルの絶対座標を取得ページを参照してください。

  • ※ clickイベントやmousemoveイベントなどのマウス操作に関するイベントのみで取得できます。

デモ

-

構文

水平(左右)

var x = event.clientX;

垂直(上下)

var y = event.clientY;

サンプルコード

JavaScript

var sampleElem = document.getElementById('sample');

sampleElem.onclick = function(e) {
	if (e) event = e;

	var x = e.clientX,
	    y = e.clientY;

	alert('x軸:' + x + 'px Y軸:' + y + 'px');
};

JavaScript逆引きリファレンス一覧へ戻る