JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <div id="child"></div>
</div>

<!-- Задача:
- При клике на зелёную область должно срабатывать.
- При клике на часть красной области, которая находится "в пределах" родителя, должно срабатывать.
- При клике на часть красной области, которая находится "ВНЕ пределов" родителя, НЕ должно срабатывать.
-->

CSS

#parent { position: relative; width: 100px; height:100px; padding:20px; background: green; }

#child { position: relative; width: 150px; height:60px; padding:20px; background: red; }

JavaScript

$('#parent').click(function(e) {
    
    if(!isClick(e, this))
        return;
    
    alert('parent clicked');
});


function isClick(e, maxSizeElem) {

   var coords = maxSizeElem.getBoundingClientRect();

    if((e.clientX > coords.left + coords.width) ||
       (e.clientY > coords.top + coords.height))
        
        return false;
    
    
    
    return true;


}