What is the jQuery stopImmediatePropagation() Event Method

JavaScript is a well-reputed versatile language that is mostly used to add interactive functionalities to websites. It comes with a library named “jQuery” that performs these tasks efficiently. The jQuery methods are basically the actions that perform a specific task without much involvement of the code. One such method is the “stopImmediatePropagation()” event method which assists in getting rid of the bubbling of the functionalities.

This guide illustrates the purpose, working, and practical implementation of the jQuery “stopImmediatePropagation()” method.

What is the jQuery “stopImmediatePropagation()” Event Method?

The “stopImmediatePropagation()” is a pre-defined jQuery method that stops the working of the rest of the event handlers except for the selected HTML element. It only triggers the event handler applied before the invoked method.

Syntax

event.stopImmediatePropagation()

In the above syntax, “event” represents all the window, forms, mouse, and keyboard events.

Let’s implement the above-defined syntax to understand it.

Example: Applying the jQuery “stopImmediatePropagation()” Method to Stop the Functionality of the Rest of the Event Handlers on the Selected Element

This example shows the practical implementation of the “stopImmediatePropagation()” method to stop the functionality of the other event handlers to the particular element.

HTML Code

First, have a look at the given HTML code:

<h2> jQuery stopImmediatePropagation() Event Method</h2>

<p>Click inside the div to trigger the onclick event</p>
<div style="border:2px solid green;width:100px;height:50px;text-align: center; padding: 50px;">Linuxhint.!</div>

In this code block:

Define a subheading of level 2 using the “<h2>” tag.
Next, specify the paragraph with the help of the “<p>” tag.
After that, add a div via the “<div>” tag. Also, use the “style” attribute to set the specified styling properties on it.

jQuery Code

Next, proceed with the below-provided code:

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("div").click(function(event) {
alert("First event executed");
event.stopImmediatePropagation();
});
$("div").click(function(event) {
alert("Second event executed");
});
$("div").click(function(event) {
alert("Third event executed");
});
});
</script>
</head>

In the above lines of code:

The first “<script>” tag in the “head” section includes the CDN path of jQuery from its official website “https://jquery.com/” using the “src” attribute.
The next “<script>” tag specifies a small jQuery code section that firstly applies the “document” selector to select the targeted DOM element and associate the “ready()” method that invokes the stated “function()” as soon as the document is loaded.
After that, the “div” selector is added and is linked with the “click()” method that will allow the execution of a function upon the button click.
In this function’s definition, create an “alert” box to display the stated message.
Next, the “stopImmediatePropagation()” method is utilized that stops the execution of remaining event handlers except for the first one on the “div”.
Lastly, the “div” selector is accessed two times again to execute the defined function upon button click, thereby avoided by the discussed method.

Output

As seen in the output, the “stopImmediatePropagation()” method halts the further functionalities such that the alert box displays the message only once instead of three times upon clicking the “div”.

Conclusion

The “stopImmediatePropagation()” is a pre-defined jQuery method that stops the working of the rest of the event handlers except for the selected HTML element. This guide demonstrated the main purpose, working, and practical implementation of the jQuery “stopImmediatePropagation()” event method.

What is the jQuery stopImmediatePropagation() Event Method