JavaScript

生のJavaScriptで、マウスの座標を取得する

VanillaなJavaScriptを練習していた際に、

マウス座標を取得するのに戸惑ってしまったので、メモとして残します。


絶対位置取得

const getMousePos = (e) => {

let posx = 0;
let posy = 0;
if (!e) e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return { x : posx, y : posy }
};

x座標とy座標を返す関数です。

ブラウザ間で取得できる数値が微妙に異なるらしく、

それをnormalizeするにはどうしたらええねん?という調査になかなか時間がかかりました。


相対位置取得

先ほどの関数を使用し、下記のように記述

// マウス座標を変数に格納

const mousepos = getMousePos(e);
// スクロール量を取得、変数に格納
const docScrolls = {left : document.body.scrollLeft + document.documentElement.scrollLeft, top : document.body.scrollTop + document.documentElement.scrollTop};
const bounds = (対象DOM).getBoundingClientRect();//対象要素の情報取得
const relmousepos = {
x : mousepos.x - bounds.left - docScrolls.left,
y : mousepos.y - bounds.top - docScrolls.top
};

とある要素に対しての、マウスの相対座標はrelmousepos.xrelmousepos.yでアクセスできる。


参考記事

Javascript - Event properties