How to stop event propagation with inline onclick attribute in JavaScript?

Javascript Web Development Front End Technology

Sometimes, we require adding the same events on the nested HTML elements. For example, we have two divs, one is parent div, and another is child div. Now, we need to add the onclick event on the parent div and child div and execute the different functions when users click on the parent div and child div. In this case, it will always execute the event on the parent div and child div.

Let’s understand executing the same event on the nested HTML elements via the example below.

Example

In the example below, we have created the two divs. We have given the ‘parent-div’ class name to the outer div and the ‘child-div’ class name to the inner div.

Also, we have added the onclick event executing the different functions on both div elements. When a user clicks on the inner div, the click event also triggers in the parent div.

<html>
<head>
   <style>
      .parent-div {
         width: 300px;
         height: 150px;
         margin: 50px;
         padding: 10px;
         background-color: lightblue;
      }
      .child-div {
         width: 100px;
         height: 70px;
         margin: 30px; 
         padding: 10px;
         background-color: lightgreen;
      }
   </style>
</head>
<body>
   <h3>Adding the same events <i> to nested HTML elements </i> in JavaScript</h3>
   <p>Click on the below parent & child DIVs to see the result</p>
   <div class = "parent-div" onclick = "executeParent()"> Parent DIV
      <div class = "child-div" onclick = "executeChild()"> Child DIV </div>
   </div>
   <div id="content"> </div>
   <script>
      let content = document.getElementById("content");
      function executeParent() {
         content.innerHTML += "Parent div clicked <br>";
      }
      function executeChild() {
         content.innerHTML += "Child div clicked <br>";
      }
   </script>
</body>
</html>

We need to use the event to solve the above issues, like clicking the child div and invoking the click event for the parent div.stopPropogation() method.

Syntax

Users can follow the syntax below to use the stopPropgation() method to stop propagating events to the parent elements.

Event.stopPropogation();

Example

In the example below, we added some texts inside the HTML tag and the onclick event executing the executeP() function. Also, we have added a tag inside the tag and added the ‘onclick’ event on the span tag executing the executeSpan() function.

Also, we used the event.stoPropogation() method with the onclick event of the element to stop propagating event on tag when the user clicks on the .

In the output, users can observe that when they click on the text of element, it only executes the executeSpan() function.

<html>
<body>
   <h3>Adding the same events <i> to nested HTML elements and using the event.stopPropogation() method </i> in JavaScript </h3> 
   <p style = "cursor: pointer;" onclick="executeP()"> Hello users! How are you? <span Onclick = "event.stopPropagation(); executeSpan();"> Child Span </span> </p>
   <div id = "content"> </div>
   <script>
      let content = document.getElementById("content");
      function executeP() {
         content.innerHTML += "Clicked on the p element. <br>";
      }
      function executeSpan() {
         content.innerHTML += "Clicked on the Span element! <br>";
      }
   </script>
</body>
</html>

Example

In the example below, we have created the hierarchy of three nested elements using the HTML <div> tag. We have added the onclick event on every element. If we don’t use the event.stopPropogation() method, it always executes the firstDivClick() function.

To solve the issue, we passed the event as an argument of the function while calling them and used the stopPropogation() method inside the function.

Users can observe that when they click on the ‘menu’ text, it only executes the kebabMenuClick() function. When users click on the second div, it only executes the secondDivClick() function.

<html>
<head>
   <style>
      .card-1 {
         width: 300px;
         height: 200px;
         background-color: red;
         cursor: pointer;
      }
      .card-2 {
         width: 200px;
         height: 150px;
         background-color: blue;
         cursor: pointer;
      }
      .kebab-menu {
         font-size: 1.2rem;
         color: white;
         cursor: pointer;
      }
   </style>
</head>
<body>
   <h3>Adding the same events <i> to nested HTML elements and using the event.stopPropogation() method </i> in JavaScript </h3>
   <div class = "card-1" onclick = "firstDivClick(event)">
      <div class = "card-2" onclick = "secondDivClick(event)">
         <div class = "kebab-menu" onclick = "kebabMenuClick(event)"> Menu </div>
      </div>
   </div>
   <div id = "content"> </div>
   <script>
      let content = document.getElementById("content");
      function firstDivClick(event) {
         content.innerHTML += "first div clicked <br>";
      }
      function secondDivClick(event) {
         event.stopPropagation();
         content.innerHTML += "second div clicked <br>";
      }
      function kebabMenuClick(event) {
         event.stopPropagation();
         content.innerHTML += "kebab menu clicked <br>";
      }
   </script>
</body>
</html>

Users learned to use the event.stopPorpogation() method with events. Basically, it is used to stop events from propagating to the parent elements. In this way, we can execute different functions for all child elements when the same event triggers the parent and child elements.