jQuery event.stopPropagation() Method

Beginner
6 min read
Updated: Oct 2026
5 examples
Live preview
jQuery event.stopPropagation() — stop event bubbling to parent elements
Definition

What Is event.stopPropagation()?

event.stopPropagation() prevents the event from bubbling up the DOM tree, so parent handlers are not notified. Takes no arguments, returns undefined. Since jQuery 1.0. Other handlers on the same element still run. Check with isPropagationStopped(). Also works with custom events from .trigger().

Remember
event.stopPropagation()   // no args

$("p").on("click", function (event) {
  event.stopPropagation();   // parents will not hear this click
});

// Same-element handlers: still run
// To also skip them → stopImmediatePropagation()
NeedUse
Stop bubbling onlyevent.stopPropagation()
Skip remaining + stop bubblestopImmediatePropagation()
Check if calledisPropagationStopped()
Cancel default actionevent.preventDefault()
Bind handlers.on("click", fn)
Approach

How to Use stopPropagation()

Call it on a child when parents must not handle the same event.

  1. Bind a handler on the inner element (button, link, paragraph, …).
  2. Inside that handler, call event.stopPropagation().
  3. Parent handlers will not run for this event.
  4. Other handlers on the same element still run in bind order.
  5. Optionally check later with event.isPropagationStopped().
PieceRequired?Role
event argumentYesjQuery event object
stopPropagation()Yes (to stop bubble)Blocks parent notification
Parent handlerOptionalWill not run if bubbling stopped
preventDefault()OptionalSeparate — cancels browser default

Pseudocode

Pseudocode
child.on("click", handlerChild)
parent.on("click", handlerParent)

when click on child:
    run handlerChild
    if handlerChild calls stopPropagation():
        do not notify parent
    else:
        bubble → run handlerParent

    // Other handlers on child still run
    // (unless stopImmediatePropagation)
Reference

Cheat Sheet

Keep these facts handy while controlling bubbling.

TopicDetail
Syntaxevent.stopPropagation()
ArgumentsNone
Returnsundefined
SincejQuery 1.0
ParentsNot notified
Same-element handlersStill run
Custom eventsWorks with .trigger()
vs immediateImmediate also skips same-element queue
Try it

Live Preview

Click the inner button — parent does not run. Click the outer area — parent runs. Same idea as the official nested-click pattern from the jQuery API.

Nested
Outer area

Inner click calls stopPropagation() — outer handler stays quiet.

Log
Click inner or outer.
Code

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

Example 1 — Nested Click: Stop the Parent

Inner element stops bubbling so the parent click handler never runs.

jQuery
$("#parent").on("click", function () {
  $("#out").append("parent handler ran\n");
});

$("#child").on("click", function (event) {
  event.stopPropagation();
  $("#out").append("child ran — propagation stopped\n");
});
Try It Yourself

How It Works

  1. Parent. Listens for clicks on the outer area.
  2. Child. Calls stopPropagation() on its click.
  3. Bubble ends. Parent is not notified for that click.
  4. Parent-only click. Still runs the parent handler normally.

Example 2 — Same-Element Handlers Still Run

Stopping bubble does not skip other handlers on the same button.

jQuery
$(document).on("click", function () {
  $("#out").append("document handler ran\n");
});

$("#btn").on("click", function (event) {
  event.stopPropagation();
  $("#out").append("Handler 1 (stopPropagation)\n");
});

$("#btn").on("click", function () {
  $("#out").append("Handler 2 still ran\n");
});
Try It Yourself

How It Works

  1. Document. Would hear the bubble if it continued.
  2. Handler 1. Stops propagation toward ancestors.
  3. Handler 2. Still runs on the same button.
  4. Document. Does not run for this click.

Example 3 — vs stopImmediatePropagation()

Immediate also kills the same-element queue; stopPropagation does not.

jQuery
$("#btn-a").on("click", function (event) {
  event.stopPropagation();
  $("#out").append("A1 (stopPropagation)\n");
});
$("#btn-a").on("click", function () {
  $("#out").append("A2 still ran\n");
});

$("#btn-b").on("click", function (event) {
  event.stopImmediatePropagation();
  $("#out").append("B1 (stopImmediate)\n");
});
$("#btn-b").on("click", function () {
  $("#out").append("B2 still ran\n");
});
Try It Yourself

How It Works

  1. Button A. stopPropagation — A2 still runs.
  2. Button B. stopImmediatePropagation — B2 is skipped.
  3. Both. Stop ancestor bubbling.
  4. Choose. Need sibling handlers? Prefer stopPropagation.

Example 4 — Inner Action on a Clickable Card

Delete button must not trigger the card’s toggle handler.

jQuery
$("#card").on("click", function () {
  $("#out").text("Card toggled");
});

$("#delete").on("click", function (event) {
  event.stopPropagation();
  $("#out").text("Delete clicked — card not toggled");
});
Try It Yourself

How It Works

  1. Card. Whole card is clickable for toggle UX.
  2. Delete. Nested control needs its own click.
  3. Stop. stopPropagation() keeps the card quiet.
  4. Pattern. Common for lists, cards, and table rows.

Example 5 — Check with isPropagationStopped()

A later handler can detect that bubbling was already stopped.

jQuery
$("#outer").on("click", "#inner", function (event) {
  event.stopPropagation();
  $("#out").append("inner — stopped propagation\n");
});

$("#outer").on("click", function (event) {
  if (event.isPropagationStopped()) {
    $("#out").append("outer saw stop flag\n");
    return;
  }
  $("#out").append("outer handler ran\n");
});
Try It Yourself

How It Works

  1. Delegated inner. Stops propagation on the shared parent.
  2. Flag. isPropagationStopped() becomes true.
  3. Outer handler. Still runs on the same element — checks the flag and returns.
  4. Outer-only click. Flag is false → normal outer logic.

Edge Cases & Pitfalls

Watch for these when stopping bubbling.

same

Does not skip same-element handlers

Other handlers on the same element still run. Use stopImmediatePropagation() to skip them.

default

Does not cancel defaults

Links and forms still do their normal action unless you also call preventDefault().

false

return false includes stopPropagation

In jQuery, return false = preventDefault + stopPropagation. Prefer explicit calls when you only need one.

live

Legacy live/delegate caveat

Handlers that only run after the event reaches a higher node may have already run lower ones. Prefer .on().

Compatibility

Browser Support

event.stopPropagation() has been available since jQuery 1.0. Stopping bubble is a standard DOM capability; jQuery exposes it on the event object. Works wherever your loaded jQuery version runs.

✓ Stable · jQuery 1.0+

event.stopPropagation()

Supported wherever jQuery 1.0+ is loaded. Prefer jQuery 3.x with .on() for modern nested UI handlers.

100% jQuery support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
stopPropagation() 1.0+

Bottom line: Safe for production. Use it to isolate child clicks from parent handlers; pair with isPropagationStopped() and preventDefault() as needed.

Analysis

Performance Notes

ApproachCostBest for
stopPropagation()NegligibleIsolating child interactions
Deep nested click treesFineStop early on the child that owns the action
Document-level listenersSkipped if stoppedUseful when you want to avoid global handlers
Over-stoppingSurprising UXOnly stop when a parent must not react

The call itself is free. The win is skipping parent work — especially expensive document or container handlers.

Remember

Key Takeaways

One line: stopPropagation() means “parents, ignore this event.”

Frequently Asked Questions

event.stopPropagation() prevents the event from bubbling up the DOM tree so parent handlers are not notified. It takes no arguments, returns undefined, and has been available since jQuery 1.0. Other handlers on the same element still run.
Call it when a child handler must run without triggering parent handlers — for example, a button inside a clickable card, or an inner control that should not activate an outer row click.
stopPropagation() stops bubbling to parents but other handlers on the same element still run. stopImmediatePropagation() stops both bubbling and any remaining handlers on the same element.
Yes. In jQuery handlers, return false calls preventDefault() and stopPropagation(). It does not call stopImmediatePropagation(), so remaining same-element handlers may still run.
Use event.isPropagationStopped(). It returns true if stopPropagation() was called on this event object during the current dispatch. Available since jQuery 1.3.
No. It affects bubbling only. To cancel link navigation or form submit, call event.preventDefault() separately.

Next: isPropagationStopped()

Learn how to detect whether stopPropagation() already ran.

isPropagationStopped() tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

10 people found this page helpful

jQuery event.isImmediatePropagationStopped() Method jQuery event.isPropagationStopped() Method