> 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/default-action.md).

# default action

[browser](/web/browser.md) ⟩ [event](/web/browser/event.md) ⟩ default action

{% hint style="success" %}
Many <mark style="color:yellow;">**events**</mark> have a <mark style="color:purple;">**default action**</mark> associated with them.&#x20;

* [**event handlers**](/web/browser/event/handler.md) are usually <mark style="color:yellow;">**called**</mark>**&#x20;**<mark style="color:red;">**before**</mark> the <mark style="color:purple;">**default behavior**</mark> takes place.&#x20;
* call [event.preventDefault](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)() to <mark style="color:red;">**prevent**</mark> this normal behavior.

```javascript
// ⭐️ prevent touch screen default actions.
container.addEventListener("touchmove", event => {
        event.preventDefault();
}, {passive: false} );                 // ⭐️ important
```

{% endhint %}

{% tabs %}
{% tab title="🧨 雷區" %}
{% hint style="warning" %}
Depending on the browser, <mark style="color:yellow;">**some events**</mark>**&#x20;**<mark style="color:red;">**can’t**</mark>**&#x20;**<mark style="color:yellow;">**be intercepted at all**</mark>. for example：

* Chrome：<mark style="color:yellow;">`ctrl+W`</mark> or <mark style="color:yellow;">`cmd+W`</mark> (close current tab) cannot be handled by JavaScript.
  {% endhint %}
  {% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="success" %}
default actions for：

* "[click](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event)" on [\<a>](https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement)：follow the link and load a new page.
* "[click](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event)" on [\<input type="submit">](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit) - submit the form.
* "<mark style="color:blue;">input</mark>" on \<input> - enter the input.
* "scroll" on document - the browser scrolls.
  {% endhint %}

{% hint style="info" %}

* [event handlers](/web/browser/event/handler.md) can [<mark style="color:yellow;">**prevent this default action**</mark>](/web/browser/event/default-action/hide-or-not-to-hide.md) by invoking [event.preventDefault()](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault), this is sometimes called "[**canceling**](/web/browser/event/default-action/hide-or-not-to-hide.md)" the event.&#x20;
* <mark style="color:red;">**unless**</mark> the handler is registered with the [passive](/web/browser/event/handler/register.md) option, which makes [preventDefault()](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) <mark style="color:red;">**ineffective**</mark>.
  {% endhint %}
  {% endtab %}

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

* [capturing phase](/web/browser/event/propagation/capturing.md)
  {% endtab %}

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

* [ ] Eloquent JS ⟩ [Ch. 15: Event Handling](https://eloquentjavascript.net/15_event.html) ⟩ [Default Actions](https://eloquentjavascript.net/15_event.html#h_GaHJsztrot)&#x20;
  {% endtab %}

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

* [Event](/web/browser/event.md) ⟩ [.preventDefault()](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
* [Element](/web/browser/dom/type/element.md) ⟩ ["click" event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event)
* [HTML](/web/html.md) ⟩&#x20;
  * [\<a>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
  * [\<input type="submit">](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/submit) - submit button
    {% endtab %}
    {% endtabs %}