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

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

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

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

デモ

-

構文

var x = event.clientX;

var y = event.clientY;

サンプルコード

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');
};