Comparison
preventDefaultvsstopPropagation
preventDefault
you stopped the form from navigating away but the parent's handler still ran.
Cancelling the browser's built-in response to an event — following a link, submitting a form, scrolling on a wheel event — without affecting propagation at all. It is routinely confused with stopping propagation because both are called in the same handler, but they do unrelated things. It has no effect on a non-cancelable event, and none at all on a passive listener.
Full entry →stopPropagation
you stopped the click from reaching the document and three unrelated features quietly broke.
Halting an event's travel through the rest of the tree, so no ancestor listener sees it — while the browser's default action still happens. It is the usual fix for a click inside an overlay closing the overlay, and the usual cause of the next bug, because analytics, focus management and outside-click detection all listen higher up. Prefer checking the target in the outer handler over silencing the event for everyone.
Full entry →