> 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.md).

# mouse event

🚧 under construction

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

{% hint style="success" %}

* <mark style="color:purple;">`contextmenu`</mark> – mouse <mark style="color:yellow;">**right-clicks**</mark> on an element.
* <mark style="color:purple;">`mouseover`</mark>/<mark style="color:purple;">`mouseout`</mark> – mouse cursor <mark style="color:yellow;">**comes over**</mark> / <mark style="color:yellow;">**leaves**</mark> an element.
* <mark style="color:purple;">`mousedown`</mark>/<mark style="color:purple;">`mouseup`</mark> – mouse is <mark style="color:yellow;">**pressed**</mark> / <mark style="color:yellow;">**released**</mark> <mark style="color:orange;">**over**</mark> an element.
* [**`mousemove`**](/web/browser/event/type/mouse/move.md) – mouse is <mark style="color:yellow;">**moved**</mark>.
* [**`click`**](/web/browser/event/type/mouse/click.md) – fires after "mouseup".
* [**`dblclick`**](/web/browser/event/type/mouse/dblclick.md) – fires after second "click".
  {% 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">

:point\_right: compare：[Element+boxes](/web/browser/dom/type/element/+boxes.md)

<img src="https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfvEFZnSBhKT6fJmus0%2Fuploads%2FuIz4w8DHIuWAyAlrkbsP%2Felement%2Bboxes.svg?alt=media&amp;token=58faf8bb-c454-48ac-ae48-5f70eb363679" alt="Element+boxes" class="gitbook-drawing">
{% endtab %}

{% tab title="🧨 雷區" %}
{% hint style="danger" %}
If you <mark style="color:yellow;">**tap**</mark> the screen, you’ll get

* [**touch events**](/web/browser/event/type/touch.md)："[touchstart](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchstart_event)", "[touchend](https://developer.mozilla.org/en-US/docs/Web/API/Element/touchend_event)", <mark style="color:yellow;">**then**</mark>
* <mark style="color:purple;">**mouse events**</mark>："mousedown", "mouseup", "click":exclamation:
  {% endhint %}
  {% endtab %}

{% tab title="👥 相關" %}

* [box models](/web/browser/dom/type/element/boxes.md)
* [touch event](/web/browser/event/type/touch.md)&#x20;
* [drag event](/web/browser/event/type/mouse/drag-event.md)
* :point\_right: [Element+boxes](/web/browser/dom/type/element/+boxes.md)
  {% endtab %}

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

* [mouse event coords](/web/browser/event/type/mouse/ex/coords.md) - compare .client/.page/.screenXY&#x20;
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] Eloquent JS ⟩ [Ch. 15: Event Handling](https://eloquentjavascript.net/15_event.html) ⟩ [Mouse Clicks](https://eloquentjavascript.net/15_event.html#i_D5iwImkmyt)
  {% 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 %}