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 web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show archive.org snapshot
Posted by Tobias Kraze to makandra dev (2011-03-31 17:42)