ウィンドウ内 / 要素内 / ディスプレイ上

  1. ウィンドウ内でのイベント発生座標
  2. 要素内でのイベント発生座標
  3. 画面上でのイベント発生座標

ウィンドウ内でのイベント発生座標

普通に pageX/pageY を使う。

// マウス
document.getElementById('foo').addEventListener('mousemove', function(e) {
	console.log('ウィンドウ内で... x='+ e.pageX, 'y='+ e.pageY);
});

// タッチ
document.getElementById('bar').addEventListener('touchmove', function(e) {
	for (let i = 0; i < e.changedTouches.length; ++i) {
		const touch = e.changedTouches[i];
		console.log('ウィンドウ内で... x='+ touch.pageX, 'y='+ touch.pageY);
	}
});

要素内でのイベント発生座標

イベントの clientX/clientY と、要素の getBoundingClientRect() で取得した left/top を使って算出する。これらはいずれもスクロールを考慮せず、現在のウィンドウ左上からの位置を取得するものなので、要素内での座標が算出できる。

// マウス
document.getElementById('foo').addEventListener('mousemove', function(e) {
	const bounds = e.target.getBoundingClientRect();
	const x = e.clientX - bounds.left;
	const y = e.clientY - bounds.top;
	console.log('要素内で... x='+ x, 'y='+ y);
});

// タッチ
document.getElementById('bar').addEventListener('touchmove', function(e) {
	for (let i = 0; i < e.changedTouches.length; ++i) {
		const touch = e.changedTouches[i];
		const bounds = touch.target.getBoundingClientRect();
		const x = touch.clientX - bounds.left;
		const y = touch.clientY - bounds.top;
		console.log('要素内で... x='+ x, 'y='+ y);
	}
});

画面上でのイベント発生座標

普通に screenX/screenYを使う。

// マウス
document.getElementById('foo').addEventListener('mousemove', function(e) {
	console.log('画面上で... x='+ e.screenX, 'y='+ e.screenY);
});

// タッチ
document.getElementById('bar').addEventListener('touchmove', function(e) {
	for (let i = 0; i < e.changedTouches.length; ++i) {
		const touch = e.changedTouches[i];
		console.log('画面上で... x='+ touch.screenX, 'y='+ touch.screenY);
	}
});