The following is a really rough implementation - it uses the document.elementFromPoint(x, y)
method and does a broad scan of each element's position to see if the element is clickable.
To keep it simple, and more performant, it surveys each element's position in 50-pixel grids. For example, if an element was 100x100 pixels, it would make 9 checks (0 0, 50 0, 100 0, 0 50, 50 50, 100 50, 0 100, 50 100, and 100 100). This value could be tweaked for a more detailed scan.
Another factor that you might want to account for, how much of an element is clickable. For example, if a 1 pixel line of the element is visible, is it really clickable? Some additional checks would need to be added to account for these scenarios.
In the following demo there are 5 squares - red, green, blue, yellow, cyan, black, and gray. The cyan element is hidden beneath the yellow element. The black element is beneath the gray element, but uses z-index
to display it above. So every element, except cyan and gray, will show as clickable.
Note: green shows as not clickable because it's hidden behind the console logs (I believe)
Here's the demo:
// Create an array of the 5 blocks
const blocks = Array.from(document.querySelectorAll(".el"));
// Loop through the blocks
blocks.forEach(block => {
// Get the block position
const blockPos = block.getBoundingClientRect();
let clickable = false;
// Cycle through every 50-pixels in the X and Y directions
// testing if the element is clickable
for (var x = blockPos.left; x <= blockPos.right; x+=50) {
for (var y = blockPos.top; y <= blockPos.bottom; y+=50) {
// If clickable, log it
if (block == document.elementFromPoint(x, y)) {
console.log('clickable - ', block.classList[1])
clickable = true;
break;
}
}
if (clickable) {
break;
}
}
if (!clickable) {
console.log('not clickable - ', block.classList[1]);
}
});
.el {
position: absolute;
width: 100px;
height: 100px;
}
.red {
top: 25px;
left: 25px;
background-color: red;
}
.green {
top: 150px;
left: 25px;
background-color: green;
}
.blue {
top: 75px;
left: 75px;
background-color: blue;
}
.yellow {
top: 50px;
left: 200px;
background-color: yellow;
}
.cyan {
top: 50px;
left: 200px;
background-color: cyan;
}
.black {
top: 25px;
left: 325px;
z-index: 10;
background-color: black;
}
.gray {
top: 25px;
left: 325px;
z-index: 1;
background-color: gray;
}
<div class="el red"></div>
<div class="el green"></div>
<div class="el blue"></div>
<div class="el cyan"></div>
<div class="el yellow"></div>
<div class="el black"></div>
<div class="el gray"></div>