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

06 Nov, 2019
Use HTML DOM stopPropagation() method to stop the event from propagating with inline onclick attribute which is described below:
HTML DOM stopPropagation() Event Method: The stopPropagation() method is used to stop propagation of event calling i.e. the parent event is called we can stop the propagation of calling its children by using the stopPropagation() method and vice-versa.
Syntax:
event.stopPropagation()
Example 1: This example stops the event propagation by adding stopPropagation method on onclick the <span> element.
<!DOCTYPE HTML> <html>     <head>         <title>             How to stop event propagation with            inline onclick attribute        </title>                  <style>            div {                background: green;            }            span {                background: red;                color: white;            }        </style>    </head>           <body style = "text-align:center;">               <h1 style = "color:green;" >             GeeksForGeeks         </h1>                   <div onclick= "alert('you clicked the div')">            <span onclick= "event.stopPropagation();             alert('you clicked Span element(inside the div)');">                Span Content            </span>        </div>    </body> </html>                    
Output:
Before clicking on the element:
After clicking on the <span> element:
Example 2: This example stops the event propagation by adding stopPropagation() method on onclick to the <span> element. This example handles the Internet Explorer case by setting window.event.cancelBubble to true.
<!DOCTYPE HTML> <html>     <head>         <title>             How to stop event propagation with            inline onclick attribute        </title>                  <style>            div {                background: green;            }            span {                background: red;                color: white;            }        </style>    </head>           <body style = "text-align:center;">               <h1 style = "color:green;" >             GeeksForGeeks         </h1>                   <div onclick= "alert('you clicked the div')">            <span onclick= "StopEventPropagation(event);            alert('you clicked Span element(inside the div)');">                Span Content            </span>        </div>                  <br>        <script>            function StopEventPropagation(event) {                if (event.stopPropagation) {                    event.stopPropagation();                }                else if(window.event) {                    window.event.cancelBubble=true;                }            }             </script>     </body> </html>                    
Output:
Before clicking on the element:
After clicking on the <span> element:
shubham_singh
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?