マウスの座標を得る

マウス座標を取得するとき、コールバックのイベントオブジェクトの中には、いろいろな要素の左上を原点を基準とした座標が含まれています。

マウスオーバーしている要素

event.offsetX / Y

ブラウザウィンドウ

event.clientX / Y

ページ全体

event.pageX / Y
スクロールしたとき clientX と差が出る

ディスプレイ・モニタ

event.screenX / Y

出力するサンプルは次のようになります。

HTML

<div id="wrap" class="wrap">
  <div id="box" class="box"></div>
</div>

JavaScript

const box = document.getElementById('box')

const addText = (event) => {
    box.innerHTML = `
    <p>element - ${event.offsetX}</p>
    <p>window  - ${event.clientX}</p>
    <p>page    - ${event.pageX}</p>
    <p>display - ${event.screenX}</p>`
}

const onMouseMove = event => addText(event)

box.addEventListener('mousemove', onMouseMove)

常に特定の要素を基準にしたマウス座標を得る

e.offsetX / Y は必ずしもイベントが付与されている要素の左上を原点としたものではなく、内包する子要素があれば、そこでイベントが発火してその要素を基準にした座標を返します。なので、常に addEventListener している要素を基準にした座標を得たい場合は少し工夫が必要です。

JavaScript

const box = document.getElementById('box')


const addText = (event) => {

  const rect = event.currentTarget.getBoundingClientRect();
  const targetX = event.clientX - rect.left;

    box.innerHTML = `
    <p>element - ${event.offsetX}</p>
    <p>window  - ${event.clientX}</p>
    <p>page    - ${event.pageX}</p>
    <p>display - ${event.screenX}</p>
    <p>target  - ${targetX}</p>`
}

const onMouseMove = event => addText(event)

box.addEventListener('mousemove', onMouseMove)

event.currentTarget で box を取得して、getBoundingClientRect() でページと要素の座標を取得します。

• element.getBoundingClientRect – Web API インターフェイス | MDN

そして、event.clientX - rect.left ウインドウ基準の座標と要素の座標の差を求めることで、要素を基準にしたマウス座標を得ることができます。

• DEMO – mouse event obj – JSFiddle

おわります。