# mouse event coords

[browser](https://lochiwei.gitbook.io/web/browser) ⟩ [event](https://lochiwei.gitbook.io/web/browser/event) ⟩ [type](https://lochiwei.gitbook.io/web/browser/event/type) ⟩ [mouse](https://lochiwei.gitbook.io/web/browser/event/type/mouse) ⟩ [example](https://lochiwei.gitbook.io/web/browser/event/type/mouse/ex) ⟩ 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&#x26;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**](https://lochiwei.gitbook.io/web/browser/dom/type/window/viewport).
    {% endtab %}
    {% endtabs %}