JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grandParent">
      C
    <div class="parent">
         B
       <div class="child">
           A
       </div>
    </div>
</div>

CSS

div {
    display :block;
    padding: 10px;
    border: 1px solid #ccc;
    cursor: pointer;
}

JavaScript

// hit the .child and notice none of his parents get informed of your action because of `e.stopPropagation()`. But clicking the `.parent` will alert the `.grandParent` because there is no `e.stopPropagation()` for the `.parent`

// make the .parent react
$('.grandParent').on('click', function(){
    alert('Grand Parent: You hit me, my child or my grand child, now deal with me!');
});

// make the .parent react
$('.parent').on('click', function(){
    alert('Parent : Don\'t you dare hitting me or my child, again!');
});

// make the child cry, when we hit him.
$('.child').on('click', function(e){
    // let the child do his thing, but don't let his ancestors be informed that we hit their child
    e.stopPropagation();
    alert('Child : waaaaaa waaaa waa huh huh waaa waaaa!');
});