Posted almost 9 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()

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

  • 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.

makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

Owner of this card:

Tobias Kraze
Last edit:
4 months ago
by Hannes Randow
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