Event: cancelable property

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.

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);