How to Stop Event Propagation with Inline Onclick Attribute in JavaScript? Last Updated : 14 Oct, 2024 Comments Improve Suggest changes Like Article Like Report The stopPropagation() method in the HTML DOM is used to stop an event from propagating (or "bubbling"). This method is particularly useful when using an inline onclick attribute in JavaScript.HTML DOM stopPropagation() Event MethodThe 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 the stopPropagation method on onclick the <span> element. html <!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: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. html <!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: Comment More infoAdvertise with us Next Article How to Stop Event Propagation with Inline Onclick Attribute in JavaScript? P PranchalKatiyar Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to Add event listener to Button in JavaScript ? In web development adding an event listener to a button is a common task that allows us to execute JavaScript code in response to user interactions, such as clicks. This helps us to create interactive and flexible web pages. Using addEventListener()The addEventListener method is a versatile and wide 1 min read How to prevent the default action of an event in JavaScript ? The term "default action" usually refers to the default behavior or action that occurs when an event is triggered. Sometimes, it becomes necessary to prevent a default action of an event. Let's create HTML structure with event and function that needs to prevent the default actions. HTML <!DOCTYPE 3 min read How to attach an event to an element which should be executed only once in JavaScript ? In this article, we will learn how to attach an event to an element which should be executed only once. There are two approaches that can be used here: Approach 1: In this approach, we will be using the jQuery one() method. This method attaches an event to the element with the specified selector. It 3 min read Difference between stopPropagation vs stopImmediatePropagation in JavaScript An event propagates or bubbles till the window object-level every time a registered event is called. For example, Let us consider a parent div element ("Div Parent") that contains another child div element ("Div child"), and for both, a click event is registered. If child div is clicked, the event w 3 min read How to Use JavaScript: void(0) and onClick? Using javascript:void(0) in combination with the onClick attribute is a technique used in HTML to create links or clickable elements that perform actions without navigating away from the page. This is common when you want to attach a JavaScript function or event handler to a clickable element but pr 2 min read Like