Cancelling event propagation

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().

  • It is the same as preventDefault followed by stopPropagation and will not prevent event handlers bound on the element itself.