> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/event/type/mouse/ex/coords.md).

# mouse event coords

[browser](/web/browser.md) ⟩ [event](/web/browser/event.md) ⟩ [type](/web/browser/event/type.md) ⟩ [mouse](/web/browser/event/type/mouse.md) ⟩ [example](/web/browser/event/type/mouse/ex.md) ⟩ coords 

{% hint style="success" %}
compare [.pageX](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX) , [.clientX](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX) , [.screenX](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenX) of a mouse event.
{% endhint %}

{% tabs %}
{% tab title="🗺️ 圖表" %} <img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FPttuulGLjF0Ew9SJATuG%2Fmouse.event.coords.svg?alt=media&amp;token=fdc0e25b-16c4-4e1b-a21f-a3963763c9f6" alt="Mouse Event coordinates" class="gitbook-drawing">
{% endtab %}

{% tab title="💈範例" %}

* replit ⟩ [mouse event coords](https://replit.com/@pegasusroe/mouse-event-coords#index.js)&#x20;

```javascript
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>`;
};
```

{% embed url="<https://replit.com/@pegasusroe/mouse-event-coords#index.js>" %}
{% endtab %}

{% tab title="📘 手冊" %}

* [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) ⟩ [UIEvent](https://developer.mozilla.org/en-US/docs/Web/API/UIEvent) ⟩ [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) ⟩
  * ([.screenX](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenX), [.screenY](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/screenY)) - relative to whole screen.
  * (.[pageX](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX), .[pageY](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageY)) - relative to document.
  * (.[clientX](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX), .[clientY](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientY)) - relative to [**viewport**](/web/browser/dom/type/window/viewport.md).
    {% endtab %}
    {% endtabs %}