Event: cancelable property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Note: This feature is available in Web Workers.
The cancelable read-only property of the Event interface indicates whether the event
can be canceled, and therefore prevented as if the event never happened.
If the event is not cancelable, then its cancelable property will be
false and the event listener cannot stop the event from occurring.
Most browser-native events that can be canceled are the ones that result from the user
interacting with the page. Canceling the click,
wheel, or
beforeunload events would prevent the user
from clicking on something, scrolling the page with the mouse wheel, or
navigating away from the page, respectively.
Synthetic events created by other JavaScript code define if they can be canceled when they are created.
To cancel an event, call the preventDefault()
method on the event. This keeps the implementation from executing the default action
that is associated with the event.
Event listeners that handle multiple kinds of events may want to check
cancelable before invoking their preventDefault() methods.
Value
A boolean value, which is true if the event can be
canceled.
Example
For example, browser vendors are proposing that the wheel event can only be canceled the first time the listener is called — any following wheel events cannot be canceled.
function preventScrollWheel(event) {
if (typeof event.cancelable !== "boolean" || event.cancelable) {
// The event can be canceled, so we do so.
event.preventDefault();
} else {
// The event cannot be canceled, so it is not safe
// to call preventDefault() on it.
console.warn(`The following event couldn't be canceled:`);
console.dir(event);
}
}
document.addEventListener("wheel", preventScrollWheel);
Specifications
| Specification |
|---|
| DOM # ref-for-dom-event-cancelable② |
Browser compatibility
| desktop | mobile | server | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
cancelable
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support