Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM stopPropagation() Event Method

  • Last Updated : 21 May, 2019

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

Syntax:

event.stopPropagation()

Return Value: It does not returns any value.

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




<!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:

Clicking Inner Div with checkbox unchecked: Confirm box will be shown twice.
stopPropagation



stopPropagation

After checkbox is checked: Confirm box is shown only once.
stopPropagation

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

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

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :