jQuery stopPropagation: Learn to Prevent Event From Bubbling Up

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:

$("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().