JSFiddle - React, Tailwind, and code Playground
HTML
<div id="one">Foo one</div>
<div id="two">Foo two</div>
<br>
<div id="three">Foo three</div>
<div id="four">Foo four</div>
<br>
<div id="five">Foo five</div>
<div id="six">Foo six</div>
<div id="anam"> ansari</div>
CSS
div {
width: 50px;
height: 50px;
background-color: black;
color: white;
}
#anam
{
top:3px;
background:red;
position:absolute;
}
JavaScript
$(document).ready(function(){
$(document.body).bind('click', function(e){
var elems = GetAllElementsAt(e.pageX, e.pageY);
elems.each(function() {
alert($(this).attr('id'));
});
});
});
function GetAllElementsAt(x, y) {
var $elements = $("body *").map(function() {
var $this = $(this);
var offset = $this.offset();
var l = offset.left;
var t = offset.top;
var h = $this.height();
var w = $this.width();
var maxx = l + w;
var maxy = t + h;
return (y <= maxy && y >= t) && (x <= maxx && x >= l) ? $this : null;
});
return $elements;
}