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(e.target.id != 'child')
        return;
    
    
    alert('only child clicks');
});