Open In App

jQuery event.stopPropagation() Method

Improve
Improve
Like Article
Like
Save
Share
Report

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:

 



Last Updated : 18 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads