JSFiddle - React, Tailwind, and code Playground

HTML

<div id="square">
    <div id="circle"></div>
</div>

CSS

#circle {
    width: 200px;
    height: 200px;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: black;
    position: relative;
    z-index: 1;
}

#square {
    width: 200px;
    height: 200px;
    border: 1px dashed black;
    background-color: #c88;
    position: absolute;
    z-index: 0;
}

JavaScript

$('#circle').click(function(e) {
    var cOffset  = $(this).offset();
    var x = e.pageX - cOffset.left;
    var y = e.pageY - cOffset.top;

    if (Math.sqrt(Math.pow(x - 100, 2) + Math.pow(y - 100, 2)) < ($(this).width() / 2)) {
        e.preventDefault();
        e.stopPropagation();
        alert('Circle');
    } else {
        alert('Square');
    }
});