1.JSマウス座標を読み込む

2138 ワード
一つまみの技術. テキストリンク

e.clientX


ブラウザウィンドウのサイズに応じてX、Y座標を取得できます.

html

 <p class="showCoord"></p>

JS

const SHOW = document.querySelector(".showCoord");

function handleMouse(e){
    SHOW.innerText = `X: ${e.clientX}, Y: ${e.clientY} `;
}

function init(){
    window.addEventListener("mousemove",handleMouse);
}
init();

e.screenX


ブラウザウィンドウのサイズに関係なくX、Y座標を取得できます.

html

 <p class="showCoord"></p>

JS

const SHOW = document.querySelector(".showCoord");

function handleMouse(e){
    SHOW.innerText = `X: ${e.screenX}, Y: ${e.screenY} `;
}

function init(){
    window.addEventListener("mousemove",handleMouse);
}
init();

比較




X値を比較すると、マウスが左側のエッジにある場合、クライアントXはブラウザの位置サイズに関係なく0です.
逆にscreenXは、ブラウザの位置やサイズを考慮せずにウィンドウ全体の座標を表示します.
TIL_09_with Wecode 001 html & css
同時実行および戻り結果の比較について(py版)