生の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.xとrelmousepos.yでアクセスできる。

参考記事

Javascript - Event properties