![jQuery Tutorial](/jquery/images/jquery-mini-logo.jpg)
- jQuery Tutorial
- jQuery - Home
- jQuery - Overview
- jQuery - Basics
- jQuery - Syntax
- jQuery - Selectors
- jQuery - Events
- jQuery - Attributes
- jQuery - AJAX
- jQuery DOM Manipulation
- jQuery - DOM
- jQuery - Add Elements
- jQuery - Remove Elements
- jQuery - Replace Elements
- jQuery CSS Manipulation
- jQuery - CSS Classes
- jQuery - Dimensions
- jQuery - CSS Properties
- jQuery Traversing
- jQuery - Traversing
- jQuery - Traversing Ancestors
- jQuery - Traversing Descendants
- jQuery References
- jQuery - Selectors
- jQuery - Events
- jQuery - Effects
- jQuery - HTML/CSS
- jQuery - Traversing
- jQuery - Miscellaneous
- jQuery - Properties
- jQuery - Utilities
- jQuery Plugins
- jQuery - Plugins
- jQuery - PagePiling.js
- jQuery - Flickerplate.js
- jQuery - Multiscroll.js
- jQuery - Slidebar.js
- jQuery - Rowgrid.js
- jQuery - Alertify.js
- jQuery - Progressbar.js
- jQuery - Slideshow.js
- jQuery - Drawsvg.js
- jQuery - Tagsort.js
- jQuery - LogosDistort.js
- jQuery - Filer.js
- jQuery - Whatsnearby.js
- jQuery - Checkout.js
- jQuery - Blockrain.js
- jQuery - Producttour.js
- jQuery - Megadropdown.js
- jQuery - Weather.js
- jQuery Useful Resources
- jQuery - Questions and Answers
- jQuery - Quick Guide
- jQuery - Useful Resources
- jQuery - Discussion
jQuery event.isPropagationStopped() Method
The jQuery event.isPropagationStopped() method is used to check whether event.stopPropagation() was ever called on this event object.
This method returns a boolean value "true" in case the jQuery event.stopPropagation() method has been already called, otherwise it returns "false".
Syntax
Following is the syntax of the jQuery event.isPropagationStopped() method −
event.isPropagationStopped()
Parameters
- This method does not accept any parameter.
Return Value
This method returns "true" if the event.stopPropagation() method is already called, "false" otherwise.
Example 1
If the event.isPropagationStopped() method is already called, this method returns "true".
The following is the basic example of the jQuery event.isPropagationStopped() method −
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style> div{ margin:10px; padding:12px; border:2px solid #666; width:160px; color: white; } </style> </head> <body> <p>Click on any box to see the effect:</p> <div id = "div1" style = "background-color:blue;"> OUTER BOX <div id = "div2" style = "background-color:red;"> INNER BOX </div> </div> <script> $(document).ready(function() { $("div").click(function(event){ alert("This is: " + $(this).text()); event.stopPropagation(); alert("Is propagation stopped? " + event.isPropagationStopped()); }); }); </script> </body> </html>
Output
The above program displays two nested div elements. When a div is clicked, a pop-up indicates which div was clicked. The pop-up also shows 'true' if event.stopPropagation() was called, indicating that event propagation has been stopped −
Example 2
If event.stopPropagation() has not been called on an event handler, the event.isPropagationStopped() method will return "false" −
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style> div{ margin:10px; padding:12px; border:2px solid #666; width:160px; color: white; } span{ color: red; margin: 10px 0px; } </style> </head> <body> <p>Click on any box to see the effect:</p> <div id = "div1" style = "background-color:rgb(76, 227, 38);"> OUTER BOX <div id = "div2" style = "background-color:rgb(24, 118, 41);"> INNER BOX </div> </div> <button>Check</button><br><span></span> <script> $(document).ready(function() { $("div").click(function(event){ alert("This is: " + $(this).text()); $('button').click(function(){ if(event.isPropagationStopped()){ $('span').text("Is propagation stopped? " + event.isPropagationStopped()); } else{ $('span').text("Is propagation stopped? " + event.isPropagationStopped()); } }) }); }); </script> </body> </html>
Output
After executing the above program, displays two nested divs and a button element. When any of div is clicked message appear indicates which div was clicked. If the button is clicked "false" is print −