preventDefault vs stopPropagation

They control two completely separate things. PreventDefault stops the browser's default action for the event, such as following a link, submitting a form or scrolling into view. StopPropagation stops the event travelling any further through the tree, so the listeners on the ancestors never see it.

// A tiny stand-in for the DOM that models a cancelable default action.
const link = {
  tagName: "A",
  listeners: {},
  defaultPrevented: false,
  addEventListener(type, handler) { (this.listeners[type] ||= []).push(handler); },
  dispatchEvent(event) {
    const payload = {
      ...event,
      preventDefault() { this.defaultPrevented = true; },
      stopPropagation() { this.propagationStopped = true; },
    };

    for (const handler of this.listeners[event.type] ?? []) {
      handler(payload);
      if (payload.cancelable && payload.defaultPrevented) {
        console.log("default action cancelled");
        return;
      }
    }
    console.log("default action ran");
  },
};

link.addEventListener("click", (event) => {
  event.preventDefault();      // stop the browser following the link
  event.stopPropagation();     // stop the event going further up
  console.log("handled");
});

link.dispatchEvent({ type: "click", cancelable: true, defaultPrevented: false });

There is a third method that completes the picture. The stopImmediatePropagation method stops the event travelling and also prevents any other listener on the same element from running. PreventDefault and stopPropagation both act on the current event, and neither of them stops other listeners on the same element from being called.

One detail that matters in practice. PreventDefault only works if the event is cancelable, and not every event is. The click event on a link is cancelable, but the load event on an image is not, so calling preventDefault on it does nothing. The cancelable property on the event tells you which you have.

Another detail: preventDefault is respected by the browser only for the default action of that event. It has no effect on what your own code does, so if your handler already ran and did something, that still happened.

PreventDefault is for replacing a built-in browser behaviour with your own. Intercepting a form submit so you can validate and post the data with fetch is the classic case. So is handling a link click to route it in a single page application without the browser performing a full navigation, and preventing the browser from opening a context menu on a custom right-click menu.

StopPropagation is for keeping an event inside the part of the interface that owns it. A nested component often wants to handle its own click without the outer container also reacting, especially when the outer container delegates clicks. A modal that sits inside a page which listens for clicks to dismiss things is another case: the click inside the modal should not close it.

Two warnings about stopPropagation. First, it stops the event reaching ancestors in the bubble phase, but listeners in the capture phase on those ancestors have usually already run, so it does not guarantee that an ancestor never sees the event. Second, stopping propagation is a blunt instrument, because it can break behaviour that other parts of the page rely on, such as an analytics listener that runs on the document.

The usual advice is to prefer the least powerful tool that solves the problem. If the default behaviour is the problem, use preventDefault. If the event reaching further up is the problem, use stopPropagation. And if you just want to run some of your own code without disturbing anything, do neither.