Code has been added to clipboard!

jQuery stopPropagation: Learn to Prevent Event From Bubbling Up

Reading time 1 min
Published Jan 2, 2018
Updated Oct 10, 2019

jQuery stopPropagation: Main Tips

  • The stopPropagation jQuery method stops the event from bubbling up the DOM tree.
  • It does not allow parent handlers to be informed of the event.

Event Propagation Explained

The event.stopPropagation jQuery method stops the event from bubbling up, so none of the parent event handlers are executed.

This method won't stop the execution of other handlers assigned on the same element. To do that, use event.stopImmediatePropagation.

The following example illustrates the usage of this method on <span> element located within <div> and <p> elements:

Example
$("span").click((event) => {
    event.stopPropagation();
    alert("The span element was clicked.");
});
$("p").click((event) => {
    alert("The p element was clicked.");
});

If you need to check whether the jQuery stopPropagation is applied to elements, you should apply event.isPropagationStopped().

Note: the jQuery stopPropagation does not take any arguments. It is written simply as follows: event.stopPropagation().

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 28/01/2021
3176 People Used
Only 97 Left
Rating
5.0