Posted over 8 years ago. Visible to the public. Repeats.

Cancelling event propagation

Within an event handler, there are multiple methods to cancel event propagation, 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.

  • event.stopPropagation()

    Only prevents the event from bubbling up the DOM. Note this effectively also cancels any event handlers attached through jQuery's live method, since those depend on bubbling.

  • event.stopImmediatePropagation()

    Prevents the event from bubbling up the DOM.
    Additionally prevents any further event handlers bound on the same element, so you don't also need to call event.stopPropagation().

  • returning false in the event handler

    This only exists for jQuery event handlers, but not for native listeners registered with Element#addEventListener().

    The same as preventDefault followed by stopPropagation. Will not prevent event handlers bound on the element itself.

Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Owner of this card:

Tobias Kraze
Last edit:
14 days ago
by Besprechungs-PC
javascript, return, false, bubble, event, stop, other, event, listeners, disable, bubbling
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Tobias Kraze to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more