📍

ブラウザのマウス座標がズレるのを調整するあのコード

2024/05/18に公開

マウス座標はウィンドウのビューポートを基準にしているため「要素の中のどの位置か」を取得するには、要素がウィンドウのどの位置にあるのかを取得する必要がある。

const TapTarget = document.getElementsByClassName("element")[0];
let _tap_position = { x: 0, y: 0 };

TapTarget.addEventListener("mousedown", MouseDown);

function MouseDown(evt) {
    // マウス座標を保存
    _tap_position.x = evt.clientX - TapTarget.getBoundingClientRect().left;
    _tap_position.y = evt.clientY - TapTarget.getBoundingClientRect().top;
}

Discussion