JavaScript | マウスポインタの座標をリアルタイムに取得する方法

2021-01-272021-07-14JavaScript 取得,JavaScript

マウス座標を取得

マウス座標は各イベント情報内から取得可能です。

例えば、ページの表示エリアを基準としたマウスの座標を取得する場合は、イベント情報を格納する変数を「e」とした場合は「e.pageX」「e.pageY」となります。

座標の基準とするエリアには以下の種類があります。

リアルタイムにマウス座標を取得（onmousemove）

document.onmousemoveイベントを利用してリアルタイムにマウス座標を取得する方法の動作サンプルとサンプルコードです。

See the Pen test by yochans (@yochans) on CodePen.

HTMLでは取得した値を表示する用のpタグを作成しています。

<p id="output"></p>

サンプルではdocument.onmouseoutでマウスが表示領域から離れた場合に、座標表示を解除しています。

//出力先
const output = document.querySelector('#output');


//マウス移動時
document.onmousemove = onmousemove;

onmousemove = function(e) {
	output.innerHTML = `x:` + e.pageX + ` y:` + e.pageY;
}


//マウス離脱時
document.onmouseout = onmouseout;

onmouseout = function(e) {
	output.innerHTML = ``;
}

イベントを発火させる範囲には「document」を指定していますが、特定の要素を指定する場合は以下のようになります。

<div id="container"></div>

//出力先
const output = document.querySelector('#output');


//対象範囲とする要素を指定
let container = document.querySelector('#container');


//マウス移動時
container.onmousemove = onmousemove;
}

onmousemove = function(e) {
	output.innerHTML = `x:` + e.pageX + ` y:` + e.pageY;
}


//マウス離脱時
container.onmouseout = onmouseout;
}

onmouseout = function(e) {
	output.innerHTML = ``;
}

別途関数を用意しなくても、無名関数にて記述する事も可能です。

//出力先
const output = document.querySelector('#output');


//マウス移動時
document.onmousemove = function(e) {
	output.innerHTML = `x:` + e.pageX + ` y:` + e.pageY;
}


//マウス離脱時
document.onmouseout = function(e) {
	output.innerHTML = ``;
}

リアルタイムにマウス座標を取得（addEventListener）

addEventListener()を利用してマウス座標を取得するサンプルです。

See the Pen JavaScript | Get the coordinates of the mouse pointer B by yochans (@yochans) on CodePen.

addEventListener()でも「onmousemove」を指定する事でマウス移動をトリガーとした発火イベントを実装できます。

addEventListener()を利用した場合も「document」ではなくイベントを発動する範囲となる要素を指定する事も可能です。

//出力先
const output = document.querySelector('#output');


//マウス移動時
document.addEventListener('onmousemove', onmousemove);

onmousemove = function(e) {
	output.innerHTML = `x:` + e.pageX + ` y:` + e.pageY;
}


//マウス離脱時
document.addEventListener('onmouseout', onmouseout);

onmouseout = function(e) {
	output.innerHTML = ``;
}