JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<button id="test">Test elementFromPoint(100, 100)</button><span id="output"></span>
<div id="main"></div>
<div id="mid"></div>
<div id="back"></div>

CSS

#main, #back, #mid {
    position: absolute;
    height: 500px;
    width: 500px;
    background-color: red;
    top: 50px;
    left: 0;
}

#mid {
    background-color: green;
}

#back {
    background-color: blue;
}

#output {margin-left: 15px;}

JavaScript

function getAllElementsFromPoint(x, y) {
    var elements = [];
    var display = [];
    var item = document.elementFromPoint(x, y);
    var lastItem;
    while (item && item !== lastItem && item !== document.body && item !== document && item !== document.documentElement) {
        elements.push(item);
        // save current style.display value
        display.push(item.style.display);
        // temporarily hide this element so we can see what's underneath it
        item.style.display = "none";
        // prevent possible infinite loop by remembering this item
        lastItem = item;
        item = document.elementFromPoint(x, y);
    }
    // restore display property
    for (var i = 0; i < elements.length; i++) {
        elements[i].style.display = display[i];
    }
    return elements;
}



document.getElementById("test").addEventListener("click", function() {
    var items = getAllElementsFromPoint(100, 100);
    var output = [];
    for (var i = 0; i < items.length; i++) {
        output.push(items[i].id);
    }
    document.getElementById("output").appendChild(document.createTextNode(output.join(", ")));
});