Open In App

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

Last Updated : 06 Nov, 2019
Improve
Improve
Like Article
Like
Save
Share
Report

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:


Similar Reads

What is Stop Propagation in JavaScript ?
In JavaScript, `stopPropagation` is a method used to prevent the further propagation of an event through the DOM (Document Object Model) hierarchy. Events in JavaScript follow a bubbling or capturing phase, during which they traverse up or down the DOM tree. When an event occurs on a specific element, it triggers handlers on that element and then p
1 min read
HTML onclick Event Attribute
The onclick event attribute in HTML works when the user clicks on the button. When the mouse clicked on the element then the script runs. It basically executes a script or function on a click event and is used for interactive elements like buttons and links. Syntax&lt;element onclick = "script"&gt;Attribute Value This attribute contains a single va
2 min read
Call multiple JavaScript functions in onclick event
To Call multiple JavaScript functions in onclick event, we have different approaches. In this article, we are going to see how to call multiple JavaScript functions in onClick event. Below are the approaches to calling multiple JavaScript functions in onclick event: Table of Content Calling all functions at onceCalling one function that contains re
2 min read
JavaScript onclick Event
The onclick function in JavaScript is an event handler that is used to respond to or handle the mouse click on the web page. It takes a callback function which will be invoked later at the time when the event is triggered. In JavaScript, we can use the onclick function in two ways as listed below: Table of Content Applying onclick function as an at
2 min read
HTML DOM onclick Event
The HTML DOM onclick event occurs when the user clicks on an element. There are three ways to add onclick events: Syntax: In HTML: &lt;element onclick="myScript"&gt; In JavaScript: object.onclick = function(){myScript}; In JavaScript, using the addEventListener() Method: object.addEventListener("click", myScript); Example 1: Using HTML C/C++ Code
2 min read
jQuery click() Method vs onClick Event
jQuery is the JavaScript library known for its lightweight, fast, and cross-platform features. It is an open-source library that goes by the motto "Write less, do more". The main objective of jQuery is to make Java script so easy that one can create more attractive and interactive websites. jQuery has multiple events like jQuery onClick(), jQuery c
5 min read
Changing CSS styling with React onClick() Event
Changing CSS styling with React onClick() Event simply means changing the CSS property or CSS classes when the click event triggers. It can be done by switching the states to update the classes when a button is clicked PrerequisitesReact JSReact useState HookApproachChanging CSS styling with React onClick() Event we will use useState variable. We w
2 min read
How to change states with onClick event in ReactJS using functional components ?
In modern web applications, to change states with onClick event in React JS using functional components is done by Hooks in React as the functional components don't have inbuilt states like class components. With Hooks, state objects are completely independent of each other, so you can have as many state objects as you want. In a single-page applic
2 min read
What is the purpose of the onClick event in React?
The onClick event plays an important role for enhancing user interactions with components in react applications which allows developers/programmers to call a function or method that gets executed when a particular element is clicked. Whether triggering a state change, navigating to another page, or performing a custom action, the onClick event is a
4 min read
React onClick Event
React onClick is an event handler utilized to capture and respond to user clicks on specific elements, typically interactive ones like buttons or links. It is similar to the HTML DOM onclick event but uses the camelCase convention in React. React onClick captures the user's click responses and executes the handler functions. React onClick Syntax:on
3 min read