❮❮ PREV NEXT ❯❯

EVENTS - event.stopImmediatePropagation()

There is something called as Immediate Propagation in JQuery. And the event.stopImmediatePropagation() is used to prevent the Immediate propagation from happening.

At first, let us understand, how Immediate Propagation works in JQuery. It is not exactly similar to Propagation.

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 = "firstDiv">
        	This is a DIV
        </div>
        
        <p class = "firstPara">
        	This is the PARA
        </p>	

      	<script>
      
			$( "div" ).click(function( event ) {
  				alert("First alert for DIV")
            });
            
            $( "div" ).click(function( event ) {
  				alert("Second alert for DIV")
            });
            
            $( "p" ).click(function( event ) {
  				alert("First alert for PARA")
            });
            
            $( "p" ).click(function( event ) {
  				alert("Second alert for PARA")
            });
            
      	</script>      
  	</body>
</html>

Output :

So, if you see the above code. We can see that there are two elements,

One <div> element,

<div class = "firstDiv">
	This is a DIV
</div>

And the other <p> element,

<p class = "firstPara">
	This is the PARA
</p>

Now, if we look at the JQuery statements, there are four JQuery statements,

The first two JQuery statements are executed, when you click on the <div> element,

$( "div" ).click(function( event ) {
	alert("First alert for DIV")
});

$( "div" ).click(function( event ) {
	alert("Second alert for DIV")
});

And when we click on the <div> element, we get two alerts.

Similarly, the next two JQuery statements are executed, when you click on the <p> element,

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

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

And when we click on the <p> element, we get two alerts.

And this is called Immediate Propagation.

Now, let us rewrite the above example, where we would be adding event.stopImmediatePropagation() and stop the Immediate Propagation as seen in the previous example.

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 = "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()
            });
            
            $( "div" ).click(function( event ) {
  				alert("Second alert for DIV")
            });
            
            $( "p" ).click(function( event ) {
  				alert("First alert for PARA")
            });
            
            $( "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 one alert,

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()
});

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

But if you look at the <p> element. On clicking on it,

This is the PARA

Both the alerts are generated, as event.stopImmediatePropagation() is not present in it.

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

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

❮❮ PREV NEXT ❯❯