Suggest an edit

Improve this article

Refine the answer for “The event.preventDefault() method”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**`event.preventDefault()` cancels the default behaviour the browser performs for a given event.**
The event still happens and all handlers still run, but the browser will not do its standard action: it will not follow the link, will not submit the form, will not open the context menu.

## Theory

### TL;DR

- The method switches off the browser's built-in reaction to an event, not the event itself.
- It does not stop propagation: handlers on ancestors still receive the event, that is what `stopPropagation()` is for.
- It only works for events that have a default action and that can be cancelled (`event.cancelable === true`).
- The usual cases: form `submit`, a `click` on a link, `contextmenu`, `dragover`, keyboard shortcuts.
- After the call `event.defaultPrevented` becomes `true`, which the rest of the chain can check.

### Quick example

```javascript
link.addEventListener('click', (event) => {
  event.preventDefault(); // no navigation happens
  console.log('Link clicked, but there is no navigation');
});
```

### Which browser actions count as default

| Element / event | Default browser behaviour |
| --- | --- |
| `<a href="...">` + `click` | following the link |
| `<form>` + `submit` | sending the form and reloading the page |
| `<input type="text">` + `keypress` Enter | may trigger a form submit |
| Context menu (`contextmenu`) | opening the right-click menu |
| `<input type="checkbox">` + `click` | toggling the state (checked or unchecked) |

### Example 1: cancel link navigation

```html
<a href="https://example.com" id="link">Go</a>

link.addEventListener('click', (event) => {
    event.preventDefault(); // cancel the navigation
    console.log('Link clicked, but there is no navigation');
  });
</script>
```

The message appears in the console, but the page does not navigate to the other site.

### Example 2: keep the form from submitting

```html
<form id="login">
  <input type="text" name="login" />
  <button>Submit</button>
</form>

form.addEventListener('submit', (event) => {
    event.preventDefault(); // do not let the form reload the page
    console.log('The form was handled manually in JS');
  });
</script>
```

This is the basic technique when you want to send the data through JavaScript (`fetch`, axios) instead of a plain HTML submit.

### Example 3: disable the context menu

```javascript
document.addEventListener('contextmenu', (event) => {
  event.preventDefault();
  console.log('Context menu disabled');
});
```

Now a right click will not open the browser's standard menu.

### Example 4: combined with stopPropagation()

Sometimes you need both to cancel the action and to stop the bubbling:

```javascript
button.addEventListener('click', (e) => {
  e.preventDefault();
  e.stopPropagation();
  console.log('The click was fully intercepted');
});
```

### Limits worth remembering

- `preventDefault()` **does not stop the event**: other handlers, on the same element or above it, still run. To cut everything off you need `stopImmediatePropagation()`.
- It only works **with events that have a default behaviour**. On a `click` on a plain `div`, for instance, it does nothing, because such a click triggers no default action.
- If `event.cancelable === false` (the `scroll` event, for example), the call is simply ignored.
- For passive listeners (`{ passive: true }`, which is the default for `touchstart` and `wheel` at document level) the browser ignores the call and prints a console warning. To cancel scrolling you must add the listener explicitly with `{ passive: false }`.

### Summary table

| Method | What it does | Example |
| --- | --- | --- |
| `event.preventDefault()` | Cancels the browser's default behaviour | Do not follow the link, do not submit the form |
| `event.stopPropagation()` | Stops the event from bubbling up | Do not pass the event to the parents |
| `event.stopImmediatePropagation()` | Fully stops all remaining handlers | Cut the processing off entirely |

> A short mnemonic:
> `preventDefault()` means "do not do the default action",
> `stopPropagation()` means "do not carry the event upward".

### Common mistakes

- **Thinking the method stops the event.** It does not: parent handlers still fire, the event's route is unchanged.
- **Calling it on an event with no default action** and expecting an effect: on a `click` on a `div` or on a custom event it simply does nothing.
- **Calling it after an async step.** An `await fetch(...)` before `preventDefault()` is already too late: the browser decides the fate of the default action synchronously, right after the handler.
- **Adding `preventDefault()` to `submit` but forgetting validation.** Built-in HTML validation runs before the `submit` event, so the manual checks are now yours to write.
- **Confusing it with `return false`.** In a DOM handler `return false` cancels nothing; that is jQuery behaviour, where it means `preventDefault()` plus `stopPropagation()` at once.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts762 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.