❮❮ PREV NEXT ❯❯

EVENTS - event.stopPropagation()

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

At first, let us understand, how Propagation works in JQuery.

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")
            });
            
      	</script>      
  	</body>
</html>

Output :

So, if you see the above code. We can see that there are two <div> elements, one inside the other,

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

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

The first JQuery statement,

$( ".outerClass" ).click(function( event ) {
	alert("For Outer Class")
});

Is for,

<div class = "outerClass">

And the second JQuery statement,

$( ".innerClass" ).click(function( event ) {
	alert("For Inner Class")
});

Is for,

<div class = "innerClass">

Now, when the next line is clicked,

This is inside the inner class

At first we get the alert,

alert("For Inner Class")

And then, we get the alert,

alert("For Outer Class")

This is called Propagation. Let's understand more.

We get two alerts because, the line,

This is inside the inner class

Is inside the <div> element with class name innerClass.

<div class = "innerClass">
	This is inside the inner class
</div>

And the above <div> element is inside the other <div> element with class name outerClass.

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

So, we get two alerts, one for innerClass.

$( ".innerClass" ).click(function( event ) {
	alert("For Inner Class")
});

And the other for outerClass,

$( ".outerClass" ).click(function( event ) {
	alert("For Outer Class")
});

Now, let us rewrite the above example, where we would be adding event.stopPropagation() and stop the 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 = "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()
            });
            
      	</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()
});

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

❮❮ PREV NEXT ❯❯