HTML DOM stopPropagation() Event Method

Last Updated : 15 Jun, 2023

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

V

Vishal Chaudhary 2

Improve

Article Tags :

Similar Reads

HTML DOM Kbd Object

The Kbd Object in HTML DOM is used to represent the HTML <kbd> element. The <kbd> tag is the phrase tag and is used to define the keyboard input. The text enclosed by the <kbd> tag is typically displayed in the browserâ€™s default monospace font. The <kbd> element can be access

HTML DOM Italic Object

The Italic Object in HTML DOM is used to represent the HTML <i> element. This tag is used to display the content in italic style. The <i> element can be accessed by using the getElementById() method. Syntax: document.getElementById("id"); Where id is assigned to the <i> tag. Exampl

HTML DOM HashChangeEvent

The HashChangeEvent in HTML DOM is an interface between the events that are triggered when the hash of the URL has been changed. The anchor part of the URL follows the # symbol. Supported Tags <body> Properties/Methods: newURL: This property is used to return the URL of the document after the

HTML DOM removeAttributeNode() Method

The DOM removeAttributeNode() method is used to remove the specified attribute from the current element. It is similar to removeAttribute() method but the difference is that the removeAttribute method is used to remove the attribute with the specified name, but on the other hand removeAttributeNode

HTML DOM Superscript Object

The superscript object in HTML DOM is used to represent the HTML <sup> element. The superscript element can be accessed by using getElementById(). Syntax: document.getElementById("id") Where id is assigned to the <sup> tag. Example: In this example, we will use DOM Superscript Object HTM

HTML DOM replaceChild() Method

The replaceChild() method in HTML DOM is used to replace a child node with a new node within the given parent node. Syntax: parentNode.replaceChild( newChild, oldChild ) Parameter Values: This method accepts two parameters which are listed below: newChild: It is the required parameter. It represents

HTML DOM Subscript Object

The Subscript Object in HTML DOM is used to represent the HTML <sub> element. The subscript element can be accessed by using the getElementById() method. Syntax: document.getElementById("id") Where id is assigned to the <sub> tag. Example 1: In this example, we will use DOM Subscript Obj

HTML | DOM Fieldset Object

The DOM Fieldset Object is used to represent the HTML <fieldset> element. The fieldset element is accessed by getElementById(). Properties: disabled: disabled property used to set or return whether a fieldset is disabled, or not.form: use to return a reference to the form that contains the fie

HTML DOM Figure Object

The DOM Figure Object is used to represent the HTML <figure> element. The figure element is accessed by getElementById(). Syntax: document.getElementById("ID"); Where â€œidâ€ is the ID assigned to the â€œfigureâ€ tag. Example 1: In this example, we will use DOM Figure Object. HTML <!DOCTYPE html

HTML DOM Section Object

The Section Object in HTML DOM is used to represent the HTML <section> element. The section element can be accessed by using the getElementById() method. Syntax: document.getElementById("id") Where id is assigned to the <section> tag. Example 1: In this example, we will use DOM Section O