JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div id ="outercontainer" style="background:green; padding:2em;">

<div id ="contentarea" style="background:red">

Display Conents 

</div>
</div>

JavaScript

$('#outercontainer:not(#contentarea)').on('click', function(event){myfunc(event)} );
function myfunc(evenement)
{
    var xstart = $('#contentarea').offset().left;
    var xend = $('#contentarea').offset().left + $('#contentarea').width();
    
    var ystart = $('#contentarea').offset().top;
    var yend = $('#contentarea').offset().top + $('#contentarea').height(); 
    
    var xx = evenement.clientX;
    var yy = evenement.clientY;
    
    if ( !(  ( xx >=  xstart && xx <=  xend ) && ( yy >=  ystart && yy <=  yend )) )
    {
        alert('out');
    }
        
    
}