JSFiddle - React, Tailwind, and code Playground

HTML

<div><span>Hello</span></div>
<table><tr><td>lala</td></tr></table>
<p>asd</p>
<div class='a'>a</div>
<div class='b'>b</div>

CSS

.a, .b {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    position: absolute;
    text-align: right;
}
.a {
    left: 100px;
    top: 100px;
}
.b {
    left: 150px;
    top: 150px;
}

JavaScript

// click placed on document, catches events that bubble up from anywhere in the page
$(document).click(function(e) {
    var clickX = e.pageX
        ,clickY = e.pageY
        ,list
        ,$list
        ,offset
        ,range
        ,$body = $('body').parents().andSelf();

    $list = $('body *').filter(function() {
        offset = $(this).offset();
        range = {
            x: [ offset.left,
                offset.left + $(this).outerWidth() ],
            y: [ offset.top,
                offset.top + $(this).outerHeight() ]
        };

        return (clickX >= range.x[0] && clickX <= range.x[1]) && (clickY >= range.y[0] && clickY <= range.y[1])

    });

    $list = $list.add($body);
    
    list = $list.map(function() {
        return this.nodeName + ' ' + this.className
    }).get();
    alert(list);
    return false;
});