event.stopPropagation() | jQuery API Documentation

event.stopPropagation()

Categories: Events > Event Object

event.stopPropagation()Returns: undefined

Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

We can use event.isPropagationStopped() to determine if this method was ever called (on that event object).

This method works for custom events triggered with trigger() as well.

Note that this will not prevent other handlers on the same element from running.

Additional Notes:



  • Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by .delegate() will propagate to the elements to which they are delegated; event handlers bound on any elements below it in the DOM tree will already have been executed by the time the delegated event handler is called. These handlers, therefore, may prevent the delegated handler from triggering by calling event.stopPropagation() or returning false.

Example:

Kill the bubbling on the click event.

1
2
3
4
 
$( "p" ).on( "click", function( event ) {
  event.stopPropagation();
  // Do something
});