Updated April 10, 2023
Introduction to jQuery stopPropagation
The jQuery stopPropagation() function is used to stop the propagation of an event to the parent elements. The jQuery stopPropagation() function is an event built-in function in jQuery. The jQueryevent.stopPropagation function stops the event from propagating or bubbling up the DOM tree for the parent elements and prevents the parent event handler to be executed for the event, so none of the parent event handlers are executed. To determine if this method has been called by an event handler that was triggered by this event, we can use event.isPropagationStopped() function. If we are required to stop this behaviour we can use the event.preventDefault() function.
Syntax of jQuery stopPropagation() Function:
event.stopPropagation();Parameters:
- The event.stopPropagation() function does not accept any parameter.
- event: This is not an event for which the event.stopPropagation() function is calls. It specifies the event which should not propagate to the parent elements and prevent the parent elements to notify about the trigger of this event.
Return Value:
The return value of this function is the immediate previous siblings.
Working of jQuery event.stopPropagation() Function
- The jQuery prev() function accepts none of the parameter.
- Suppose we have a span element in the HTML page that have p and div elements as the parent elements.
- Now we need to stop the propagation of any event of the span to its parent elements by using the event.s stopPropagation() function as “$( “span” ).click(function(event){ event.stopPropagation(); });”, which stop the propagation of the event notification to the parent elements of the span element.
Examples of jQuery stopPropagation
Given below are the examples of jQuery stopPropagation:
Example #1
Example of jQuery event.stopPropagation() function to show how an event propagate to the parent element and how to stop the propagation of event.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery stop propagation </title>
<script>
$(document).ready(function(){
$( "p" ).click(function(event){
event.stopPropagation();
$( "#p1" ).text("The p element was clicked.");
});
$( "span" ).click(function(event){
$( "#p2" ).text("The span element was clicked.");
});
$( "div" ).click(function(){
$( "#p3" ).text("The div element was clicked.");
});
});
</script>
</head>
<body>
<h3> This an example of jQuery stopPropagation() function : </h3>
<div style = "height : 200px; width : 600px; padding : 10px; border:1px solid blue; background-color : blue;">
This is a div element have child elements.
<p style="background-color : green"> This is a p element child of the div element, it stop the propogation of event to its parent. <br>
<span style="background-color : yellow">This is a span element child of the p and the div element, it allow the propagation of event to its parent.</span></p></div>
</body>
</html>
<p id = "p1" style = "color : red"> </p>
<p id = "p2" style = "color : red"> </p>
<p id = "p3" style = "color : red"> </p>
</body>
</html>Output:
Once we click on the p text content, the output is:
Once we click on the span text content, the output is:
In the above code, there are “div”, “p”, and “span” elements are used, where the “span” element is the child of “p” and div elements and the “p” element is the child of “div” element. If any event trigger by the “span” element then it propagates to the “p” and “div” element, similarly if any event trigger by “p” it will propagate to the “div” element. Next, the event.stopPropagation() function is used to stop the propagation of “p” element event to its parent that “div” element, so if we click on the “p” element content, it is just displaying “The p element was clicked”, whereas if we click on the “span” element content, it is displaying “The p element was clicked”, and “The span element was clicked.”. The span event is propagating till the p element and then stops propagating farther to the “div” element.
Example #2
Example of jQuery event.stopPropagation() function to show how an event propagate to the parent element and how to stop the propagation of event with the id of the element.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery stop propagation </title>
<script>
$(document).ready(function(){
$( "#p1" ).click(function(event){
event.stopPropagation();
alert("The p element was clicked.");
});
$( "#span2" ).click(function(event){
alert("The span element was clicked.");
});
$( "div" ).click(function(){
alert("The div element was clicked.");
});
$( "h3" ).click(function(){
alert("The h3 element was clicked.");
});
});
</script>
</head>
<body>
<h3> This an example of stopPropagation() function: </h3>
<div id = "div1">
<h3 id = "h31" > This is a first heading and it is a child of div element.
<p id = "p1" style = "color : red" > This is a first paragraph and it is a child of div element.
<span id = "span1"> This is a first span box and it is a child of div element. </span></p></h3>
</div>
<div>
<h3 id = "h32"> This is a second heading and it is a sibling of div element.
<span id = "span2"style = "color : red" > This is a second span box and it is a siblingof div element.
<p id = "p2"> This is a second paragraph and it is a child of div element. </p></span></h3>
</div>
<br>
</body>
</html>Output:
Once we click on the first paragraph, the output is:
Once we click on the second span box whose event propagates to its parent elements give the sequence of outputs as:
In the above code, there are “div”, “p”, “h3”, and “span” elements are used, where the “span” with id “span2” element is the child of “h3” and div elements and the “p” with id “p1” element is the child of “div” element. If any event trigger by “span” of id “span2” then it propagates to the “h3” and “div” element, similarly if any event trigger by “p” with id “p1” will not propagate to the “div” element, because of event.stopPropagation() function is used to stop the propagation of the “p” element event to its parent that “div” element, so if we click on the “p” element content, it is just displaying the alert message “The p element was clicked.”.
Conclusion
The jQuery event.stopPropagation() function is a built in function, which is used to stop the propagation of an event to the parent elements.
Recommended Articles
This is a guide to jQuery stopPropagation. Here we discuss the introduction, working of jQuery event.stopPropagation() function and examples. You may also have a look at the following articles to learn more –
