How do you stop an event's default action?

Call preventDefault() on the event object. It cancels what the browser would normally do — submitting a form, following a link, checking a checkbox — while leaving the event itself to continue propagating.

form.addEventListener("submit", (e) => {
  e.preventDefault();          // no page reload
  submitViaFetch(new FormData(form));
});

link.addEventListener("click", (e) => {
  e.preventDefault();          // do not navigate
  openInModal(link.href);
});

Not the same as stopPropagation()

They are independent, and reaching for stopPropagation when you meant preventDefault is a common mix-up — it breaks unrelated handlers higher up, such as a "click outside to close" dropdown.

When it does nothing

Not every event is cancelable. Check event.cancelable if unsure — scroll for instance cannot be prevented this way.

Passive listeners also ignore it. Browsers make touchstart and wheel passive by default for scroll performance, so you must opt out explicitly:

el.addEventListener("wheel", handler, { passive: false });

Without that, the call is ignored and the console warns.

In React

e.preventDefault() works the same on the synthetic event. But return false from a handler does not prevent anything in React, unlike old inline HTML handlers where it did both preventDefault and stopPropagation.

Accessibility note

If you cancel a link's navigation, keep a real href so the URL is still shareable and middle-click, keyboard activation and "open in new tab" continue to work.