JSFiddle - React, Tailwind, and code Playground

HTML

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

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

CSS

#parent,#child{
     position: relative; 
     z-index: 1;
}
#parent {
     width: 100px; 
     height: 100px;
     padding: 20px;
     background: green; 
}
#child {
     1pointer-events: none; 
     position: relative; 
     width: 150px; 
     height: 60px; 
     padding: 20px; 
     background: red; 
}
.pseudo{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
    left: 0px;
    top: 0px;
    
}

JavaScript

$("#parent").append("<div class='pseudo'></div>")
$("#parent .pseudo").live("click", function() {
    
  alert("точно попал =)")
}
)