Read more

Cancelling event propagation

Tobias Kraze
March 31, 2011Software engineer at makandra GmbH

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.
Illustration money motivation

Opscomplete powered by makandra brand

Save money by migrating from AWS to our fully managed hosting in Germany.

  • Trusted by over 100 customers
  • Ready to use with Ruby, Node.js, PHP
  • Proactive management by operations experts
Read more Show archive.org snapshot
Posted by Tobias Kraze to makandra dev (2011-03-31 17:42)