Home » jQuery » jQuery DOM Manipulation Methods

jQuery event.stopPropagation() Method

jQuery | event.stopPropagation() Method: Learn about the jQuery event.stopPropagation() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on November 01, 2022

event.stopPropagation() Method

An event is an action occurred by the user. Therefore, many functions and methods can be set according to those actions performed. When these actions are defined for an event interface, we term those as the event properties. There are various predefined event properties in jQuery. Here, let's discuss the event.stopPropagation() method.

The event.stopPropagation() is a built-in method in jQuery. The event.stopPropagation() method allows the element to avoid the execution of the parent event handlers for the specific element. It prevents the bubbling of the events to the parent elements.

This means when a child element event is executed, then accordingly parent element event is also executed. Hence, to avoid this, event.stopPropagation() can be used which will only execute the selected element until the parent element event is triggered. We can also use event.isPropagationStopped() method to check whether event.stopPropagation() method has been called for the selected element or not.

event.stopPropagation() Method Syntax

event.stopPropagation();

This property takes in one required parameter – event. This event parameter is the one specified in the binding function. The below example shows how the event.stopPropagation() is triggered when the sentences are clicked.

jQuery event.stopPropagation() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery Event Property - Stop Propagation </h2>
    <div>Click the following sentences to implement the event.stopPropagation property of jQuery.</div>
    <hr>
    <h4 style="color:darkblue">Welcome to Include Help !</h4>
    <p>This is a jQuery Tutorial for Event Methods.
    <div>- Here we are discussing about <b>event.result</b> property. : [CHILD ELEMENT]</div>
    </p>
    <h4 style="color:darkblue">Thanks for visiting !</h4>
    <hr>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(event){
        $('h4').hover(function(event){
            $('h3').html('H4 is has been Hovered.')
        });
    
        $('p').click(function(){
            $('h3').html('Paragraph tag has been Clicked.');
        });
    
        $('div').click(function(event){
            event.stopPropagation();
            $('h3').html('Div tag Clicked.');
        });
    });
  </script>
</html>

Output:

Example 1: jQuery event.stopPropagation() Method