jQuery event.stopPropagation()

What You’ll Learn

event.stopPropagation() stops bubbling to parent elements while other handlers on the same element still run. This tutorial covers the official jQuery nested click demo, card inner-action patterns, comparing with stopImmediatePropagation() and return false, and checking state with isPropagationStopped().

Introduction

When a user clicks a nested element, the click event bubbles from the inner target up through every ancestor. Parent handlers bound with .on() receive the same event unless something stops the bubble chain.

event.stopPropagation() halts that upward travel. jQuery has exposed this method since version 1.0 on its normalized event object. The official pattern calls it inside a handler on a nested element so parent handlers are not notified — while other handlers on the same element continue to run normally.

Understanding event.stopPropagation()

This method tells jQuery: do not bubble this event to parent elements.

• Parent handlers blocked — ancestors in the DOM tree do not receive the event.
• Same element continues — other handlers registered on the current target still run.
• No arguments — call it with empty parentheses; returns undefined.
• Check afterward — use event.isPropagationStopped() to verify the flag was set.

📝 Syntax

Official jQuery API form (since 1.0):

event.stopPropagation()
// typical pattern:
$( "button" ).on( "click", function ( event ) {
  event.stopPropagation();
  // parent handlers are not notified
});

Parameters

• None — this method does not accept any arguments.

Return value

• undefined — the method stops bubbling as a side effect. Use event.isPropagationStopped() to check state afterward.

Official jQuery API example

$( "p" ).on( "click", function ( event ) {
  event.stopPropagation();
  // Do something
});
$( "div" ).on( "click", function ( event ) {
  // This function won't be executed when p is clicked
  $( this ).css( "background-color", "#f00" );
});

Examples Gallery

Example 1 follows the official jQuery nested click demo. Examples 2–5 cover same-element handler behavior, stop method comparison, card inner actions, and parent guard patterns with isPropagationStopped().

$( "div" ).on( "click", function () {
  $( "#log" ).append( "<div>div (parent) handler ran</div>" );
  $( this ).css( "background-color", "#f00" );
});
$( "p" ).on( "click", function ( event ) {
  event.stopPropagation();
  $( "#log" ).append( "<div>p handler ran — propagation stopped</div>" );
});

Click p → #log shows "p handler ran — propagation stopped"
"div (parent) handler ran" never appears
Click div background → parent handler runs, div turns red

$( document ).on( "click", function () {
  $( "#log" ).append( "document handler ran\n" );
});
$( "#btn" ).on( "click", function ( event ) {
  event.stopPropagation();
  $( "#log" ).append( "Handler 1 (stopPropagation)\n" );
});
$( "#btn" ).on( "click", function () {
  $( "#log" ).append( "Handler 2 still ran\n" );
});

#log shows:
Handler 1 (stopPropagation)
Handler 2 still ran
"document handler ran" never appears

// Button A — stopPropagation only
$( "#btn-a" ).on( "click", function ( event ) {
  event.stopPropagation();
  $( "#log-a" ).append( "Handler 1 (stopPropagation)\n" );
});
$( "#btn-a" ).on( "click", function () {
  $( "#log-a" ).append( "Handler 2 still ran\n" );
});
// Button B — stopImmediatePropagation
$( "#btn-b" ).on( "click", function ( event ) {
  event.stopImmediatePropagation();
  $( "#log-b" ).append( "Handler 1 (stopImmediate)\n" );
});
$( "#btn-b" ).on( "click", function () {
  $( "#log-b" ).append( "Handler 2 still ran\n" );
});

Button A: Handler 1 + Handler 2 both run
Button B: Handler 1 only — Handler 2 skipped

$( ".card" ).on( "click", function () {
  $( this ).toggleClass( "open" );
  $( "#status" ).text( "Card toggled" );
});
$( ".card .delete" ).on( "click", function ( event ) {
  event.stopPropagation();
  $( "#status" ).text( "Delete clicked — card not toggled" );
});

Click card body → card toggles open, #status shows "Card toggled"
Click delete button → #status shows "Delete clicked — card not toggled"

// Bound first — delegated handler on outer for inner clicks
$( "#outer" ).on( "click", ".inner", function ( event ) {
  event.stopPropagation();
  $( "#log" ).append( "delegated inner — stopped propagation\n" );
});
// Bound second — outer bubble handler guards with isPropagationStopped()
$( "#outer" ).on( "click", function ( event ) {
  if ( event.isPropagationStopped() ) {
    $( "#log" ).append( "outer skipped — propagation already stopped\n" );
    return;
  }
  $( "#log" ).append( "outer handler ran\n" );
});

Click .inner → #log shows "delegated inner — stopped propagation"
then "outer skipped — propagation already stopped"
Click outer background directly → #log shows "outer handler ran"

🚀 Common Use Cases

• Nested click targets — buttons or links inside clickable rows, cards, or list items.
• Modal overlays — inner content clicks stop propagation so backdrop handlers do not close the dialog.
• Dropdown menus — menu item clicks isolated from document-level close handlers until explicitly handled.
• Table row actions — action icons inside selectable rows without triggering row selection.
• Custom tooltips — interactive tooltip content stops propagation to parent hover/click handlers.
• Debugging bubble chains — pair with isPropagationStopped() to trace where bubbling was halted.

📝 Notes

• Available since jQuery 1.0 — returns undefined.
• Takes no arguments — call with empty parentheses.
• Stops bubbling to parent elements — parent handlers are not notified.
• Does not stop other handlers on the same element from running.
• Does not call preventDefault() — cancel defaults separately if needed.
• return false in jQuery handlers calls preventDefault plus stopPropagation, not stopImmediatePropagation.
• Use event.isPropagationStopped() (jQuery 1.3+) to check whether this method was called.

💡 Best Practices