JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grandParent" onClick="grandParent(); return false;">
      C
    <div class="parent">
         B
       <div class="child">
       <input type="checkbox" class="hello"> Hello
       </div>
    </div>
</div>

CSS

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

JavaScript

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

// make the .parent react
$('.parent').on('click', function(e){
	e.stopPropagation()
    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){
e.stopPropagation();
 alert('Child : waaaaaa waaaa waa huh huh waaa waaaa!');
});

$('.hello').on('change', function(e){
e.stopPropagation();
 alert('checkbox clicked');
});