jQuery event.stopImmediatePropagation()

What You’ll Learn

event.stopImmediatePropagation() halts the handler queue on the current element and stops bubbling. This tutorial covers the official jQuery p/div demo, blocking analytics handlers, comparing with stopPropagation() and return false, and checking state with isImmediatePropagationStopped().

Introduction

When multiple handlers are bound to the same element with .on(), jQuery runs them in registration order during one dispatch. Sometimes an early handler must stop the rest — not just parent bubbling, but every remaining listener on that element.

event.stopImmediatePropagation() does exactly that. jQuery has exposed this method since version 1.3 on its normalized event object. The official demo binds two handlers to p — the first calls stopImmediatePropagation(), so the second never runs — while a handler on sibling div still executes normally.

Understanding event.stopImmediatePropagation()

This method tells jQuery: stop running handlers on this element and do not bubble further.

• Same element — remaining handlers registered on the current target are skipped.
• Bubbling stopped — implicitly calls event.stopPropagation() so parent handlers do not run.
• No arguments — call it with empty parentheses; returns undefined.
• Check afterward — use event.isImmediatePropagationStopped() to verify the flag was set.

📝 Syntax

Official jQuery API form (since 1.3):

event.stopImmediatePropagation()
// typical pattern:
$( "button" ).on( "click", function ( event ) {
  event.stopImmediatePropagation();
  // remaining handlers on this button are skipped
});

Parameters

• None — this method does not accept any arguments.

Return value

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

Official jQuery API example

$( "p" ).on( "click", function ( event ) {
  event.stopImmediatePropagation();
});
$( "p" ).on( "click", function ( event ) {
  // This function won't be executed
  $( this ).css( "background-color", "#f00" );
});
$( "div" ).on( "click", function ( event ) {
  // This function will be executed
  $( this ).css( "background-color", "#f00" );
});

Examples Gallery

Example 1 follows the official jQuery p/div demo. Examples 2–5 cover analytics blocking, stop method comparison, document-level bubbling, and plugin guard patterns.

$( "p" ).on( "click", function ( event ) {
  event.stopImmediatePropagation();
  $( "#log" ).append( "<div>p handler 1 ran — immediate stopped</div>" );
});
$( "p" ).on( "click", function ( event ) {
  $( "#log" ).append( "<div>p handler 2 ran (skipped)</div>" );
});
$( "div" ).on( "click", function ( event ) {
  $( "#log" ).append( "<div>div handler ran</div>" );
  $( this ).css( "background-color", "#f00" );
});

Click p → #log shows "p handler 1 ran — immediate stopped"
p handler 2 never runs
Click div → #log shows "div handler ran", div turns red

$( "#buy" ).on( "click", function ( event ) {
  event.stopImmediatePropagation();
  $( "#status" ).text( "Purchase handled by primary handler" );
});
$( "#buy" ).on( "click", function ( event ) {
  $( "#status" ).append( " | analytics tracked" );
});

#status shows "Purchase handled by primary handler"
" | analytics tracked" 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

$( document ).on( "click", function () {
  $( "#log" ).append( "<div>document handler ran</div>" );
});
$( "#inner" ).on( "click", function ( event ) {
  event.stopImmediatePropagation();
  $( "#log" ).append( "<div>inner handler ran — bubbling stopped</div>" );
});
$( "#inner" ).on( "click", function () {
  $( "#log" ).append( "<div>inner handler 2 (skipped)</div>" );
});

#log shows "inner handler ran — bubbling stopped"
"inner handler 2" and "document handler ran" never appear

// Validation plugin — bound first
$( "#save" ).on( "click", function ( event ) {
  if ( !$( "#name" ).val() ) {
    event.stopImmediatePropagation();
    $( "#msg" ).text( "Validation failed" );
  }
});
// Fallback plugin — bound second, guards before running
$( "#save" ).on( "click", function ( event ) {
  if ( event.isImmediatePropagationStopped() ) return;
  $( "#msg" ).text( "Save handler ran — form would submit." );
});

Empty name → #msg shows "Validation failed", save handler skipped
Filled name → #msg shows "Save handler ran — form would submit."

🚀 Common Use Cases

• Handler ownership — primary handler stops immediate propagation so legacy or analytics handlers on the same element do not run.
• Validation gates — fail fast on invalid input and skip save or submit handlers bound later.
• Plugin conflicts — one plugin stops the queue when it handles the event exclusively.
• Exclusive UI modes — modal or overlay handler prevents other click listeners on the same trigger.
• Event delegation edge cases — child handlers may stop immediate propagation before delegated parent logic on the same element runs.
• Debugging handler order — pair with isImmediatePropagationStopped() to trace which handler halted the queue.

📝 Notes

• Available since jQuery 1.3 — returns undefined.
• Takes no arguments — call with empty parentheses.
• Stops remaining handlers on the same element and stops bubbling.
• Implicitly calls event.stopPropagation() — parent handlers do not run.
• Does not call preventDefault() — cancel defaults separately if needed.
• return false in jQuery handlers calls preventDefault plus stopPropagation, not stopImmediatePropagation.
• Use event.isImmediatePropagationStopped() (jQuery 1.3+) to check whether this method was called.

💡 Best Practices