JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a">
    <div id="b">
        <div id="c">
            
        </div>
        
    </div>
</div>

<textarea id="log" cols="10" rows="10"></textarea>

CSS

#a { width: 100px; height: 100px; padding: 50px; background: blue; }
#b { width: 100%; height: 100%; background: red; }
#c { width: 100px; height: 100px; padding: 70px; background: black; }

JavaScript

document.getElementById("a").onclick = clicked;
document.getElementById("b").onclick = clicked2;
document.getElementById("c").onclick = clicked2;

function clicked(event) { 
    if(event.stopPropagation){
        event.stopPropagation();        
    }else{
        event.cancelEvent = true;
    }
    document.getElementById("log").value += "clicked\n";
}

function clicked2(event) { 
    document.getElementById("log").value += "clicked\n";
}