how do I prevent parent onclick action on child using javascript

Question

Hello am applying onclick function inside onclick function, but the function which I am performing on parent is also applying on child div, how to to prevent that function on child. In my code I redirecting on google.com by click on red box but when I click on blue box is alos going on google.com how to prevent this option

my code

    
         function parent(){
            window.location.href='https://www.google.com/';
         }
    
         function child(){
            alert('Hello this is the blue button');
         }

    <div style="background: red; padding: 50px; height:200px; width:500px; " onclick="parent()">
         <div style="background: blue; padding: 5px; color:white;" onclick="child()">Click me</div>
    </div>

[Event.stopPropagation()](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) — DBS, Sep 01 '20 at 14:42
Best to [avoid inline handlers](https://stackoverflow.com/a/59539045), they have way too many problems to be worth using nowadays, such as a demented scope chain and quote escaping issues. Attach event listeners properly using Javascript with `addEventListener` instead. — CertainPerformance, Sep 01 '20 at 14:42
You really need to learn how event propagation works before you ask this question. People can give you an answer but if you dont understand how the underlying system works you arent going to learn why it works or when you might actually need it. — Marie, Sep 01 '20 at 14:45
@DBS you really shouldnt provide answers in comments. it circumvents the entire answer/voting process because people cannot vote down comments. — Marie, Sep 01 '20 at 14:45
Does this answer your question? [How do I prevent a parent's onclick event from firing when a child anchor is clicked?](https://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli) — Marie, Sep 01 '20 at 14:47
@Marie Isn't it one purpose of comments, quickly pointing to the right (or, yes, possibly wrong) direction? Just a link is not an answer, a good (even incorrect) answer need some explanation, examples, code... — Jan Stránský, Sep 01 '20 at 14:49
@JanStránský Not at all. Comments are to ask for clarification or provide tangentially related information. Here is more information https://stackoverflow.com/help/privileges/comment — Marie, Sep 01 '20 at 15:59
@Marie thanks for the link and clarification. I still think the first comment (and "half"-answers) may be treated as "relevant but minor information to the post" — Jan Stránský, Sep 01 '20 at 18:16

score 0 · Accepted Answer · answered Sep 01 '20 at 14:54

0

Hope this will work.

function child(){
  event.stopPropagation();
  alert('Hello this is the blue button');
}

answered Sep 01 '20 at 14:54

Zahid Hasan

527
4
11

Please include an explanation with your answer. If the OP doesnt know how it works or why it works they havent actually learned anything except to copy + paste when something comes up. – Marie Sep 01 '20 at 16:00

how do I prevent parent onclick action on child using javascript

1 Answers1