Within an event handler, there are multiple methods to cancel event propagation Show archive.org snapshot , each with different semantics.
event.preventDefault()
Only prevents the default browser behavior for the click, i.e. going to a different url or submitting a form.
When invoked on a touchstart
event, this also
prevents mouse events like click
to be triggered
Show archive.org snapshot
.
event.stopPropagation()
Prevents the event from bubbling up the DOM.
event.stopImmediatePropagation()
Prevents the event from triggering any remaining event handlers on the same DOM node.
Additionally, it also prevents the event from bubbling up the DOM, so you don't also need to call event.stopPropagation()
.
Note
Everything below is legacy trivia about jQuery. We don't use that any longer.
event.stopPropagation()
effectively also cancels any event handlers attached through jQuery's live
method, since those depend on bubbling.
returning false
in the event handler only exists for jQuery event handlers, but not for native listeners registered with Element#addEventListener()
.
preventDefault
followed by stopPropagation
and will not prevent event handlers bound on the element itself.