マウスイベントの座標系

JavaScript を利用することで、マウスイベントのブラウザやモニター、HTML要素からの各種座標を取得することができます。

座標は基準からみての距離を数値（ピクセル単位）で取得するので、どの対象基準から見ての座標が欲しいかが重要になります。ここでは、媒体別にクライアント座標・スクリーン座標・グローバル座標の３つを紹介します。

クライアント座標

ブラウザの表示可能領域の左上を基準点（ｘ：０ ｙ：０）とした座標のことをクライアント座標といいます。

JavaScript でマウスイベントのクライアント座標は、clientX プロパティとclientY プロパティに保存されています。

img_note_03_01.png

$event . clientX$

clientXは、マウスイベントが発生したブラウザ上のX座標が格納されています。 clientXは読み取り専用プロパティとなります。

$event . clientY$

clientYは、マウスイベントが発生したブラウザ上のY座標が格納されています。 clientYは読み取り専用プロパティとなります。

MouseEvent.clientX - Web API | MDN

MouseEvent.clientY - Web API | MDN

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScript演習１ - サンプル５</title>
  <style>
    body { height:500vh; }
  </style>
</head>
<body>
  <h1>マウスイベントの座標</h1>
  <h2>クライアント座標</h2>
  <p id="client">x : y</p>

  <h2>スクリーン座標</h2>
  <p id="screen">x : y</p>

  <h2>グローバル座標</h2>
  <p id="global">x : y</p>

  <script src="sample05.js"></script>
</body>
</html>


// document mouseover event
document.addEventListener('mousemove', (event)=>{

  // client position
  **document.querySelector('#client').textContent = `${ event.clientX } : ${ event.clientY }`;**

});