❮❮ PREV NEXT ❯❯

EVENTS - event.isImmediatePropagationStopped()

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

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

Example :

<html>
  	<head>
    	<title> My First Programme </title>
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
   	
        <div class = "firstDiv">
        	This is a DIV
        </div>
        
        <p class = "firstPara">
        	This is the PARA
        </p>	

      	<script>
      
			$( "div" ).click(function( event ) {
  				alert("First alert for DIV")
  				event.stopImmediatePropagation()
  				if(event.isImmediatePropagationStopped()) {
  					alert("Immediate Propagation is enabled for DIV")
  				}
  				else {
  					alert("Immediate Propagation is not enabled for DIV")
  				}
            });
            
            $( "div" ).click(function( event ) {
  				alert("Second alert for DIV")
            });
            
            $( "p" ).click(function( event ) {
  				alert("First alert for PARA")
  				
  				if(event.isImmediatePropagationStopped()) {
  					alert("Immediate Propagation is enabled for P")
  				}
  				else {
  					alert("Immediate Propagation is not enabled for P")
  				}
            });
            
            $( "p" ).click(function( event ) {
  				alert("Second alert for PARA")
            });
            
      	</script>      
  	</body>
</html>

Output :

And if you see the above output, on clicking the below line for <div>,

This is a DIV

We just got the alert for <div>,

alert("First alert for DIV")

And the second alert is not generated.

This is because of the JQuery statement,

$( "div" ).click(function( event ) {
	alert("First alert for DIV")
	event.stopImmediatePropagation()
	if(event.isImmediatePropagationStopped()) {
		alert("Immediate Propagation is enabled for DIV")
	}
	else {
		alert("Immediate Propagation is not enabled for DIV")
	}
});

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

And in the next statement,

if(event.isImmediatePropagationStopped()) {
	alert("Immediate Propagation is enabled for DIV")
}
else {
	alert("Immediate Propagation is not enabled for DIV")
}

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

if(event.isImmediatePropagationStopped())

And generate the alert,

alert("Immediate Propagation is enabled for DIV")

Similarly, if you click on the <p> element,

This is the PARA

We get both the alerts as usual.

$( "p" ).click(function( event ) {
	alert("First alert for PARA")

	if(event.isImmediatePropagationStopped()) {
		alert("Immediate Propagation is enabled for P")
	}
	else {
		alert("Immediate Propagation is not enabled for P")
	}
});

$( "p" ).click(function( event ) {
	alert("Second alert for PARA")
});

Also when we check, if Immediate Propagation is enabled or not.

if(event.isImmediatePropagationStopped()) {
	alert("Immediate Propagation is enabled for P")
}
else {
	alert("Immediate Propagation is not enabled for P")
}

We get the below alert,

alert("Immediate Propagation is not enabled for P")

Since, Immediate Propagation is not enabled for P.

❮❮ PREV NEXT ❯❯