❮❮ PREV NEXT ❯❯

EVENTS - event.isPropagationStopped()

There is something called as Propagation in JQuery. And the event.isPropagationStopped() is used to check if event.stopPropagation() is invoked or not.

Note : It's very important that you have a knowledge of'event.stopPropagation()'

Example :

<html>
  	<head>
    	<title> My First Programme </title>
        <script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
   	
        <div class = "outerClass">
        	<div class = "innerClass">
        		This is inside the inner class
        	</div>
        </div>		

      	<script>
      
			$( ".outerClass" ).click(function( event ) {
  				alert("For Outer Class")
            });
            
            $( ".innerClass" ).click(function( event ) {
  				alert("For Inner Class")
                event.stopPropagation()
                if(event.isPropagationStopped()) {
                	alert("event.stopPropagation() is enabled")
                }
            });
            
      	</script>      
  	</body>
</html>

Output :

And if you see the above output, on clicking the below line,

This is inside the inner class

We just got the alert for .innerClass,

alert("For Inner Class")

And the second alert is not generated.

This is because of the JQuery statement,

$( ".innerClass" ).click(function( event ) {
	alert("For Inner Class")
	event.stopPropagation()
	if(event.isPropagationStopped()) {
		alert("event.stopPropagation() is enabled")
	}
});

The event.stopPropagation() stops propagation and the second alert is not generated.

And in the next statement,

if(event.isPropagationStopped()) {
	alert("event.stopPropagation() is enabled")
}

we have checked if event.stopPropagation() is enabled or not.

if(event.isPropagationStopped())

And generate the alert,

alert("event.stopPropagation() is enabled")

❮❮ PREV NEXT ❯❯