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 Coupon Found:

Verified STAFF PICK

TOP-RATED CODING COURSES

Learn the skills of tomorrow

The best time to learn programming is now - follow this link to access 100+ coding courses and enjoy learning at a very low cost!

Expiration date: 13/05/2021
2287 People Used
Only 92 Left
Rating
5.0