✨mouse event coords

browser ⟩ event ⟩ type ⟩ mouse ⟩ example ⟩ coords

compare .pageX , .clientX , .screenX of a mouse event.

🗺️ 圖表

Mouse Event coordinates

💈範例

• replit ⟩ mouse event coords

const { log } = console

// ⭐️ import
import { $ } from './js/ext/Node_ext.js'; // Node + ext
// --------------------------------------------------------------------

const info = $("#info");

document.onmousemove = (e) => {
    info.innerHTML = `<ul><li>screen: (${e.screenX}, ${e.screenY})`
        + `<li>page: (${e.pageX}, ${e.pageY})`
        + `<li>client: (${e.clientX}, ${e.clientY})</ul>`;
};

📘 手冊

• Event ⟩ UIEvent ⟩ MouseEvent ⟩

  • (.screenX, .screenY) - relative to whole screen.
  • (.pageX, .pageY) - relative to document.
  • (.clientX, .clientY) - relative to viewport.