jQuery event.stopPropagation() Method (original) (raw)

Last Updated : 11 Jul, 2025

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 `

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

`

Output:

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

HTML `

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

`

Output: