jQuery event.isPropagationStopped()

What You’ll Learn

event.isPropagationStopped() returns whether event.stopPropagation() was called on this event. This tutorial covers the official button demo, stopping bubble to parent handlers, comparing with stopImmediatePropagation() and isImmediatePropagationStopped(), and coordinating multiple listeners.

Introduction

When a click or other event bubbles from a child element up through parent elements, each ancestor with a bound handler may run. Sometimes a handler on the child must stop that bubble — so a parent’s delegated handler never fires.

Calling event.stopPropagation() halts bubbling. To check whether it already happened — in the same handler or a helper — call event.isPropagationStopped(). jQuery has exposed this check since version 1.3 on its normalized event object (aligned with the W3C DOM Level 3 specification).

Understanding event.isPropagationStopped()

This method answers one question: was event bubbling stopped on this event?

• Before stopPropagation — event.isPropagationStopped() returns false.
• After stopPropagation — returns true for the rest of that dispatch.
• Read-only — takes no arguments; does not change state.
• Parent handlers — once true, ancestors will not receive this dispatch (unless they use capture phase).

📝 Syntax

Official jQuery API form (since 1.3):

event.isPropagationStopped()



// typical pattern:
$( "button" ).on( "click", function ( event ) {
  if ( !event.isPropagationStopped() ) {
    // propagation not stopped yet
  }
  event.stopPropagation();
  if ( event.isPropagationStopped() ) {
    // now true
  }
});

Parameters

• None — this method does not accept any arguments.

Return value

• Boolean — true if event.stopPropagation() was called on this event object; otherwise false.

Official jQuery API example

function propStopped( event ) {
  var msg = event.isPropagationStopped() ? "called" : "not called";
  $( "#stop-log" ).append( "<div>" + msg + "</div>" );
}



$( "button" ).on( "click", function ( event ) {
  propStopped( event );
  event.stopPropagation();
  propStopped( event );
});

Examples Gallery

Example 1 follows the official jQuery demo. Examples 2–5 cover bubbling to parents, same-element handlers, guard helpers, and return false.

function propStopped( event ) {
  var msg = event.isPropagationStopped() ? "called" : "not called";
  $( "#stop-log" ).append( "<div>" + msg + "</div>" );
}



$( "button" ).on( "click", function ( event ) {
  propStopped( event );
  event.stopPropagation();
  propStopped( event );
});

#stop-log shows:
not called
called

$( ".outer" ).on( "click", function () {
  $( "#log" ).append( "<div>Outer handler ran</div>" );
});

$( ".inner button" ).on( "click", function ( event ) {
  event.stopPropagation();
  $( "#log" ).append( "<div>Inner stopped bubble — flag: " +
    event.isPropagationStopped() + "</div>" );
});

Inner stopped bubble — flag: true
(Outer handler never runs)

$( "#btn" ).on( "click", function ( event ) {
  event.stopPropagation();
  $( "#log" ).append( "Handler 1 — propagation stopped? " +
    event.isPropagationStopped() + "\n" );
});

$( "#btn" ).on( "click", function ( event ) {
  $( "#log" ).append( "Handler 2 — still sees flag: " +
    event.isPropagationStopped() );
});

Handler 1 — propagation stopped? true
Handler 2 — still sees flag: true

function logBubbleState( event, label ) {
  if ( event.isPropagationStopped() ) {
    return label + ": propagation already stopped";
  }
  return label + ": propagation still active";
}

$( "#btn" ).on( "click", function ( event ) {
  $( "#log" ).append( "<div>" + logBubbleState( event, "before" ) + "</div>" );
  event.stopPropagation();
  $( "#log" ).append( "<div>" + logBubbleState( event, "after" ) + "</div>" );
});

before: propagation still active
after: propagation already stopped

$( "#btn" ).on( "click", function () {
  return false;
});

$( "#btn" ).on( "click", function ( event ) {
  $( "#log" ).text(
    "Second handler — propagation stopped? " + event.isPropagationStopped()
  );
});

Second handler — propagation stopped? true
(Same-element handler still runs; parent bubbling is stopped)

🚀 Common Use Cases

• Debug bubbling — log isPropagationStopped() after child handlers run.
• Nested widgets — inner control stops bubble so outer panel click handler does not fire.
• Delegated parents — child stopPropagation() prevents parent .on() delegation.
• Modal overlays — click inside modal stops propagation to document handlers.
• Plugin stacks — check the flag before running parent-level analytics.
• Testing — assert the flag after simulating clicks in Try-it labs.

📝 Notes

• Available since jQuery 1.3 — returns a Boolean.
• Takes no arguments — read-only query method.
• Reports whether stopPropagation() (or stopImmediatePropagation()) halted bubbling on this event object.
• Does not report handler-queue state alone — use isImmediatePropagationStopped() for same-element skips.
• stopImmediatePropagation() also sets isPropagationStopped() to true.
• Introduced in DOM Level 3; jQuery normalizes it across supported browsers.

💡 Best Practices