[JavaScript] マウスポインタの座標を取得する

投稿日：2016年11月20日更新日：2018年5月2日

マウスポインタの座標位置をリアルタイムで取得するサンプルです。

サンプルソース

例）マウスを動かすとリアルタイムでX座標とY座標の位置を表示する

window.onload=function(){
  //マウス移動時のイベントをBODYタグに登録する
  document.body.addEventListener("mousemove", function(e){

    //座標を取得する
    var mX = e.pageX;  //X座標
    var mY = e.pageY;  //Y座標

    //座標を表示する
    document.getElementById("txtX").value = mX;
    document.getElementById("txtY").value = mY;
  });
}

window.onload=function(){

//マウス移動時のイベントをBODYタグに登録する

document.body.addEventListener("mousemove", function(e){

//座標を取得する

var mX = e.pageX; //X座標

var mY = e.pageY; //Y座標

//座標を表示する

document.getElementById("txtX").value = mX;

document.getElementById("txtY").value = mY;

});

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  X座標：<input type="text" id="txtX" />
  Y座標：<input type="text" id="txtY" />
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

X座標：<input type="text" id="txtX" />

Y座標：<input type="text" id="txtY" />

</body>

</html>

実行サンプル

マウスを動かすと以下にポインタの座標が表示されます。

X座標： Y座標：

解説

マウスポインタ座標は、mousemoveイベント引数のpageX、pageYで取得できます。
ページ全体で座標を取得したい場合は、BODYタグにmousemoveイベントを設定します。
特定のタグ内で座標を取得したい場合は、対象のタグにmousemoveイベントを設定します。
jQuery版は、以下ページをご覧ください。
→ [jQuery] マウスポインタの座標を取得する

執筆者：とら