Event: preventDefault() method
==============================

The **`preventDefault()`** method of the `Event` interface tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.

 The event continues to propagate as usual,
 unless one of its event listeners calls
 `stopPropagation()`
 or `stopImmediatePropagation()`,
 either of which terminates propagation at once.

 As noted below, calling **`preventDefault()`** for a
 non-cancelable event, such as one dispatched via
 `EventTarget.dispatchEvent()`, without specifying
 `cancelable: true` has no effect.

Syntax
------


```js
event.preventDefault()
```

Examples
--------

### Blocking default click handling

 Toggling a checkbox is the default action of clicking on a checkbox. This example
 demonstrates how to prevent that from happening:

#### JavaScript


```js
const checkbox = document.querySelector("#id-checkbox");

checkbox.addEventListener("click", checkboxClick, false);

function checkboxClick(event) {
  let warn = "preventDefault() won't let you check this!<br>";
  document.getElementById("output-box").innerHTML += warn;
  event.preventDefault();
}
```


#### HTML


```html
<p>Please click on the checkbox control.</p>

<form>
  <label for="id-checkbox">Checkbox:</label>
  <input type="checkbox" id="id-checkbox" />
</form>

<div id="output-box"></div>
```


#### Result

### Stopping keystrokes from reaching an edit field

 The following example demonstrates how invalid text input can be stopped from reaching
 the input field with `preventDefault()`. Nowadays, you should usually use native HTML form validation
 instead.

#### HTML

 The HTML form below captures user input.
 Since we're only interested in keystrokes, we're disabling `autocomplete` to prevent the browser from filling in the input field with cached values.


```html
<div class="container">
  <p>Please enter your name using lowercase letters only.</p>

  <form>
    <input type="text" id="my-textbox" autocomplete="off" />
  </form>
</div>
```


#### CSS

 We use a little bit of CSS for the warning box we'll draw when the user presses an
 invalid key:


```css
.warning {
  border: 2px solid #f39389;
  border-radius: 2px;
  padding: 10px;
  position: absolute;
  background-color: #fbd8d4;
  color: #3b3c40;
}
```


#### JavaScript

 And here's the JavaScript code that does the job. First, listen for
 `keydown` events:


```js
const myTextbox = document.getElementById("my-textbox");
myTextbox.addEventListener("keydown", checkName, false);
```


 The `checkName()` function, which looks at the pressed key and decides
 whether to allow it:


```js
function checkName(evt) {
  const key = evt.key;
  const lowerCaseAlphabet = "abcdefghijklmnopqrstuvwxyz";
  if (!lowerCaseAlphabet.includes(key)) {
    evt.preventDefault();
    displayWarning(
      "Please use lowercase letters only.\n" + `Key pressed: ${key}\n`,
    );
  }
}
```


 The `displayWarning()` function presents a notification of a problem. It's
 not an elegant function but does the job for the purposes of this example:


```js
let warningTimeout;
const warningBox = document.createElement("div");
warningBox.className = "warning";

function displayWarning(msg) {
  warningBox.innerHTML = msg;

  if (document.body.contains(warningBox)) {
    clearTimeout(warningTimeout);
  } else {
    // insert warningBox after myTextbox
    myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling);
  }

  warningTimeout = setTimeout(() => {
    warningBox.parentNode.removeChild(warningBox);
    warningTimeout = -1;
  }, 2000);
}
```


#### Result

Notes
-----

 Calling `preventDefault()` during any stage of event flow cancels the event,
 meaning that any default action normally taken by the implementation as a result of the
 event will not occur.

 You can use `Event.cancelable` to check if the event is cancelable.
 Calling `preventDefault()` for a non-cancelable event has no effect.

Specifications
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-preventdefault③ |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.