webmanab.html

menu

マウス座標のいろいろな原点 -『Javascript』

　

demo

toc
ー

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

      マウスの座標を得る

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

      マウスオーバーしている要素
      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() でページと要素の座標を取得します。

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

      おわります。

      マウス座標のいろいろな原点 -『Javascript』

      share
      ー

      tag
      ー

      tip