event.stopPropagation()

event.stopPropagation()

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

  • version added: 1.0event.stopPropagation()

We can use .isPropagationStopped() to determine if this method has been called by an event handler that was triggered by this event.

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. Use the method event.isPropagationStopped() to know whether this method was ever called (on that event object).

Example:

Kill the bubbling on the click event.

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<script>$("p").click(function(event){
  event.stopPropagation();
  // do something
});  </script>
</body>
</html>

Demo:

Result: