Event: preventDefault() method
Note: This feature is available in Web Workers.
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.
If a passive listener calls preventDefault()
, nothing will happen and a console warning may be generated.
Syntax
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
const checkbox = document.querySelector("#id-checkbox");
checkbox.addEventListener("click", checkboxClick, false);
function checkboxClick(event) {
const warn = "preventDefault() won't let you check this!\n";
document.getElementById("output-box").innerText += warn;
event.preventDefault();
}
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.
<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:
.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:
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:
function checkName(evt) {
const key = evt.key;
const lowerCaseAlphabet = "abcdefghijklmnopqrstuvwxyz";
if (!lowerCaseAlphabet.includes(key)) {
evt.preventDefault();
displayWarning(`Please use lowercase letters only.\nKey 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:
let warningTimeout;
const warningBox = document.createElement("div");
warningBox.className = "warning";
function displayWarning(msg) {
warningBox.innerText = 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