Open In App

HTML DOM stopPropagation() Event Method

Improve
Improve
Like Article
Like
Save
Share
Report

The stopPropagation() method is used to stop the propagation of event calling. That is a parent event is called we can stop the propagation of calling its children by using the stopPropagation() method and vice-versa.

 Syntax:

event.stopPropagation()

Return Value: It does not return any value.

Example: In this example when the checkbox is not checked and the inner div is clicked then confirm box is shown 2 times (one for the inner div and the other for the outer div). But when the checkbox is checked and the inner div is clicked again then confirm box is shown only once due to the stopPropagation() event method. 

HTML




<!DOCTYPE html>
<html>
   
<head>
    <title>DOM stopPropagation() Method</title>
    <style>
        #div1 {
            background: lightgreen;
        }
        #div2 {
            background: green;
            color: white;
        }
    </style>
</head>
   
<body style="text-align:center">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h2>DOM stopPropagation() Method</h2>
    <div id="div1" onclick="Geek2()">
        GeeksforGeeks!
        <div id="div2" onclick="Geek1(event)">
            A computer science portal for geeks.
        </div>
    </div>
    <br>
    <input type="checkbox" id="c">
    Stop propagation:
   
    <script>
        function Geek1(event) {
            confirm("Inner div is clicked");
            if (document.getElementById("c").checked) {
                event.stopPropagation();
            }
        }
        function Geek2() {
            confirm("Outer div is clicked");
        }
    </script>
</body>
   
</html>


Output:  

 

Supported Browsers: The browser supported by the stopPropagation() Event method are listed below:

  • Apple Safari
  • Google Chrome
  • Firefox
  • Opera
  • Internet Explorer 9.0


Last Updated : 15 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads