jQuery event.stopPropagation() Method

The jQuery event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event. It means that when an event is triggered, it will not propagate to the parent elements, thus preventing any parent event handlers from executing.

You can use the method event.isPropagationStopped() to know whether this method was ever called (on that event object).

Syntax

Following is the syntax of the jQuery event.stopPropagation() method −

event.stopPropagation()

Parameters

This method does not accept any parameter.

Return Value

This method does not return any value.

Example 1

The following program demonstrates the usage of the jQuery event.stopPropagation() method −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        div{
            width: 200px;
            padding: 20px;
        }
    </style>
</head>
<body>
   <p>Click on any box to see the effect:</p>
   <div id="div1" style="background-color:blue;">
       OUTER BOX
       <div id="div2" style="background-color:red;">
             INNER BOX
      </div> 
  </div>
  <script>
  $(document).ready(function() {
    $("div").click(function(event){
        alert("This is : " + $(this).text()); // Comment the following to see the difference
        event.stopPropagation();
    });
});
  </script>
</body>
</html>

Output

The above program displayed a nested div element with some text. When we click any of the divs, a respective pop-up alert will appear, indicating which div was clicked −

Example 2

Using the event.isPropagationStopped() method along with the event.stopPropagation() method to check whether this method was ever called −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        div{
            width: 200px;
            padding: 20px;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
        }
    </style>
</head>
<body>
   <p>Click on any box to see the effect:</p>
   <div id="div1" style="background-color:rgb(69, 238, 100);">
       Outer Div 
       <div id="div2" style="background-color:rgb(13, 138, 13);">
             INNER Div
      </div> 
  </div>    
  <p>Click on the below button to check whether propagation stopped or not.</p>
  <button>Check</button><span></span>
  <script>
  $(document).ready(function() {
    $("div").click(function(event){
        $('span').text("This is : " + $(this).text());
        event.stopPropagation();
        $('button').click(function(){
            if(event.isPropagationStopped()){
                $('span').text("Is propagation stopped? " + event.isPropagationStopped());
            }
            else{
                $('span').text("Is propagation stopped? " + event.isPropagationStopped());
            }
        });
    });
});
  </script>
</body>
</html>

Output

After executing the above program, displays two nested div's and a button element. When any of div is clicked message appear indicates which div was clicked. If the button is clicked "true" is print −

jquery_ref_events.htm

Print Page