マウスイベントの座標取得について #JavaScript

mousedown, mousemove, mouseup などのイベントで拾えるマウス座標ですが、いくつか種類があります。いつもどれがどれだったか忘れてしまうので、いい加減覚えようと思ってまとめました。

clientX, clientY

DOMコンテンツ内のX,Y座標。

HTMLページ内のワールド座標です。左上が0,0

offsetX, offsetY

イベントをハンドリングしているDOM要素内のX,Y座標。

screenX, screenY

スクリーン上のX,Y座標。

デュアルモニター環境だったりするととても大きな値になったりします。

x,y

Chromeだと使える。値はclientX, clientYと一緒。

迷った時の確認用コード

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div style="margin: 100px; width:200px; height:2000px; border: solid 1px gray;" id="box"></div>
  <script>
    document.getElementById('box').onmousemove = function(e) {
      console.log('client(%s, %s) offset(%s, %s) screen(%s, %s)',e.clientX, e.clientY, e.offsetX, e.offsetY, e.screenX, e.screenY);
    }
  </script>
</body>

</html>

黒い枠線のボックス上でマウスを移動するとコンソールにそれぞれの座標値が出力されます。