[JavaScript] マウスが移動したイベントを取得する（onMouseMove）

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

マウスが移動したイベントを取得するには、onmousemoveを使用します。

サンプルソース

例）divタグ（id="area1"）上でマウスが移動したら座標を表示する

function mousemove(e){
  var str = "X座標：" + e.pageX + " Y座標：" + e.pageY;
  document.getElementById("area1").innerText = str;
}

function mousemove(e){

var str = "X座標：" + e.pageX + " Y座標：" + e.pageY;

document.getElementById("area1").innerText = str;

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <div id="area1" onmousemove="mousemove(event);"/>　</div>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

実行サンプル

下の黄色い部分でマウスポインタを動かすと、座標が表示されます。

解説

ページ全体でマウス移動イベントを取得したい場合は、BODYタグにonmousemoveを指定します。

執筆者：とら