JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    <div id="inner">
         <p>Lorem Ipsum</p>
    </div>
</div>
<div id="console"></div>

CSS

#outer {
    cursor: pointer;
    background: teal;
    padding: 50px;
}
#inner {
    cursor: auto;
    background: #005780;
    padding: 20px;
}

JavaScript

var console = $('#console');

$('#outer').on('click', function (e) {
    if ( e.target != this) return;
    
    console.append('<br>Outer clicked');
});