Locating DOM element by absolute coordinates

Question

Is there a simple way to locate all DOM elements that "cover" (that is, have within its boundaries) a pixel with X/Y coordinate pair?

Answer 1

You can have a look at document.elementFromPoint though I don't know which browsers support it.
Firefox and Chrome do. It is also in the MSDN, but I am not so familiar with this documentation so I don't know in which IE version it is included.

Update:

To find all elements that are somehow at this position, you could make the assumption that also all elements of the parent are at this position. Of course this does not work with absolute positioned elements.

elementFromPoint will only give you the most front element. To really find the others you would have to set the display of the front most element to none and then run the function again. But the user would probably notice this. You'd have to try.

Answer 2

I couldn't stop myself to jump on Felix Kling's answer:

var $info = $('<div>', {
    css: {    
        position:    'fixed',
        top:         '0px',
        left:        '0px',
        opacity:     0.77,
        width:       '200px',
        height:      '200px',
        backgroundColor: '#B4DA55',
        border:      '2px solid black'
    }
}).prependTo(document.body);

$(window).bind('mousemove', function(e) {
    var ele = document.elementFromPoint(e.pageX, e.pageY);
    ele && $info.html('NodeType: ' + ele.nodeType + '<br>nodeName: ' + ele.nodeName + '<br>Content: ' + ele.textContent.slice(0,20));
});

updated: background-color !

Answer 3

This does the job (fiddle):

$(document).click(function(e) {
    var hitElements = getHitElements(e);
});

var getHitElements = function(e) {
    var x = e.pageX;
    var y = e.pageY;
    var hitElements = [];

    $(':visible').each(function() {
        var offset = $(this).offset();
        if (offset.left < x && (offset.left + $(this).outerWidth() > x) && (offset.top < y && (offset.top + $(this).outerHeight() > y))) {
            hitElements.push($(this));
        }
    });

    return hitElements;
}​

When using :visible, you should be aware of this:

Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout. During animations that hide an element, the element is considered to be visible until the end of the animation. During animations to show an element, the element is considered to be visible at the start at the animation.

So, based on your need, you would want to exclude the visibility:hidden and opacity:0 elements.