Default actions in JavaScript events

The browser already has plans

When a user clicks, types, scrolls, submits, or right-clicks, your JavaScript listener is not the only thing in the room. The browser often has a default action: built-in behavior it will perform if nothing cancels it.

A link’s default action is navigation. A form’s default action is submission. A checkbox click toggles its checked state. A printable key in an input inserts a character. Space can scroll the page. These defaults are why plain HTML pages work before you write one line of JavaScript.

This lesson fits after Introduction to events, Bubbling & capturing, and Event delegation. You will use those ideas here: events dispatch through listeners, and later listeners can inspect what earlier listeners did.

event.preventDefault() requests: “Do not perform the built-in behavior for this event.” The request only succeeds if the event is cancelable. You can check that with event.cancelable.

It does not stop propagation. Other listeners may still run unless you separately call stopPropagation(). It also does not undo behavior that already happened. Default cancellation is about the browser’s next built-in step.

1const event = {Run2  type: "click",3  cancelable: true,4  defaultPrevented: false,5  preventDefault() {6    if (this.cancelable) this.defaultPrevented = true;7  },8};9 10function linkListener(event) {11  event.preventDefault();12  console.log("link listener finished");13}14 15function routerListener(event) {16  if (event.defaultPrevented) {17    console.log("router skipped");18    return;19  }20  console.log("router handles the click");21}22 23linkListener(event);24routerListener(event);25console.log(event.defaultPrevented);

In the replay, the inner listener can cancel the link default. The outer listener still runs because propagation was not stopped. It simply sees defaultPrevented and decides not to do more.

The easiest way to understand default actions is to try real ones. This playground attaches listeners with addEventListener inside an effect. The listeners touch only real DOM nodes through refs, so React can keep rendering the lesson safely.

1link.addEventListener("click", maybePreventLink);2form.addEventListener("submit", maybePreventForm);3checkbox.addEventListener("click", maybePreventCheckbox);4function maybePrevent(event, switchIsOn) {5  if (switchIsOn && event.cancelable) event.preventDefault();6  log(event.type, event.defaultPrevented);7}

Try these small experiments: allow the link and watch the hash change; prevent the checkbox and notice it refuses to toggle; prevent the input and typed characters do not appear; allow the context menu and the browser may show its real menu.

Scrolling is special because it must feel immediate. If every wheel or touchmove listener might cancel scrolling, the browser may have to wait for JavaScript before moving pixels. Passive listeners solve that problem.

1box.addEventListener("wheel", (event) => {2  log("cancelable", event.cancelable);3  if (shouldBlock) {4    event.preventDefault();5  }6  log("defaultPrevented", event.defaultPrevented);7}, { passive });

In modern browsers, a passive listener that calls preventDefault() does not set defaultPrevented. Some browsers also treat touchstart, touchmove, or wheel listeners on window, document, or body as passive by default. Use { passive: false } only when blocking scroll is truly the interaction. CSS touch-action and overscroll-behavior are often better.

When preventDefault() succeeds, the event object keeps a boolean sticky note: event.defaultPrevented === true. Later listeners can read it and politely skip their own behavior.

1panel.addEventListener("click", (event) => {2  if (event.target.matches("a")) event.preventDefault();3});4panel.addEventListener("click", (event) => {5  if (event.defaultPrevented) return;6  runRouterBehavior();7});8const scroll = new Event("scroll", { cancelable: false });9scroll.preventDefault();

The same idea is common in delegated code: one ancestor listener handles many children, but it backs off when a child has already claimed the default action.

Not every event can cancel a default. A scroll event is the classic trap: it fires after scrolling happened, so it is not cancelable. If you need to prevent scrolling, cancel the earlier wheel, touchmove, or key event that causes the scroll.

Where you will use this

Use default cancellation when you replace the browser’s built-in behavior with an intentional, accessible behavior of your own. Here are three patterns you will see constantly.

1form.addEventListener("submit", (event) => {2  event.preventDefault();3  saveWithJavaScript(new FormData(form));4});

This submit handler cancels the page navigation, then saves with JavaScript. The replacement behavior must be visible: show loading, success, and error messages.

1input.addEventListener("keydown", (event) => {2  if (event.key === "x") {3    event.preventDefault();4  }5});

Be careful with keyboard defaults. Users rely on arrows, Tab, Space, Enter, and browser shortcuts. Block only the exact key you replace, and provide another path.

• Single-page routing

  Cancel a same-origin link click, update history, then render the next view without a full document load.

• Drawing and maps

  For a canvas or map, carefully cancel gestures the app owns. Use CSS gesture controls when possible.

• Delegated widgets

  Child widgets can call preventDefault(); parent listeners check defaultPrevented before acting.

• “preventDefault stops bubbling.” No. It cancels an eligible default action. Propagation is controlled separately.
• “stopPropagation stops the default.” No. A link can still navigate even if it never reaches an ancestor listener.
• “return false always works.” Not in addEventListener. Prefer explicit preventDefault().
• “Passive is just faster syntax.” No. Passive means the listener cannot cancel the default.
• “Every event has a preventable default.” No. Check event.cancelable and choose the right earlier event.
• “Blocking defaults is harmless.” Defaults are often accessibility features. Replace them thoughtfully.

1button.addEventListener("click", (event) => {2  return false; // does not cancel an addEventListener default3});4 5button.onclick = function (event) {6  return false; // old property handlers cancel the default7};

Key takeaways

• Default actions are the browser’s built-in behavior for events.
• preventDefault() works only on cancelable events, and passive listeners cannot cancel.
• Default actions happen after dispatch finishes, so later listeners can still run and inspect defaultPrevented.
• Canceling defaults and stopping propagation are different decisions.
• Respect accessibility: never remove keyboard, scrolling, selection, form, or menu behavior without a clear replacement.

A default action is the browser’s built-in response to an event, and preventDefault() cancels it only for a cancelable event in a listener allowed to cancel.

Up next: Custom events.