Skip to content
Related Articles

Related Articles

jQuery event.stopPropagation() Method

Improve Article
Save Article
  • Last Updated : 18 Nov, 2022
Improve Article
Save Article

The jQuery event.stopPropagation() method is an inbuilt method which is used to stop the windows propagation. In the DOM tree when setting an event with the child element and the parent element as well then if you hit on the child element event it will call both child and the parent element as well. So with the help of this method this popup will not appear for the other element except selected element. 

Syntax:

event.stopPropagation()

Parameters: It accepts single parameter which is mandatory. This parameter comes from binding function. 

Example 1: This example illustrates the event.stopPropagation() method. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        jQuery event.stopPropagation() Method
    </title>
    <script src=
    </script>
  
    <style>
        .main {
            border: 1px solid green;
            padding: 20px;
            width: 60%;
        }
    </style>
  
    <!-- Script to use jQuery event.stopPropagation() Method -->
    <script>
        $(document).ready(function () {
            $(".main").click(function () {
                alert("Main div element");
            });
            $(".GFG").click(function (event) {
                event.stopPropagation();
                alert("Nested div element");
            });
            $(".geeks").click(function (event) {
                alert("Second nested div element");
            });
        });
    </script>
</head>
  
<body>
    <!-- Click on element to display alert message -->
    <div class="main">
        GeeksforGeeks
        <div class="GFG">
            A computer science portal
            <div class="geeks">
                Welcome to GeeksforGeeks
            </div>
        </div>
    </div>
</body>
  
</html>

Output:

 

Example 2: In this example, the color will change when we click on the text.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        jQuery event.stopPropagation() Method
    </title>
    <script src=
    </script>
  
    <style>
        .main {
            border: 1px solid green;
            padding: 20px;
            width: 60%;
        }
    </style>
  
    <!-- Script to use jQuery event.stopPropagation() Method -->
    <script>
        $(document).ready(function () {
            $(".GFG").click(function (event) {
                event.stopPropagation();
                $(".GFG").css( "color", "red");
            });
            $(".geeks").click(function (event) {
                $(".geeks").css( "color", "green");
            });
        });
    </script>
</head>
  
<body>
    <!-- Click on element to change the color -->
    <div class="GFG">
        GeeksforGeeks
        <div class="geeks">
            A computer science portal
        </div>
    </div>
</body>
  
</html>

Output:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!