Расположение элемента DOM по абсолютным координатам

Question

Есть ли простой способ найти все элементы DOM, которые "покрывают" (то есть имеют в своих границах) пиксель с парой координат X / Y?

Answer 1

Вы можете взглянуть на document.elementFromPoint, хотя я не знаю, какие браузеры его поддерживают.
Firefox и Chrome делают. Он также находится в MSDN , но я не очень знаком с этой документацией, поэтому не знаю, в какую версию IE она включена.

Обновление:

Чтобы найти все элементы, которые так или иначе находятся в этой позиции, вы можете сделать предположение, что также все элементы родительского элемента находятся в этой позиции. Конечно, это не работает с элементами с абсолютным позиционированием.

elementFromPoint даст вам только самый передний элемент. Чтобы действительно найти другие, вам нужно установить display самого переднего элемента на none, а затем снова запустить функцию. Но пользователь, вероятно, заметит это. Вы должны попробовать.

Answer 2

Я не мог удержаться, чтобы запрыгнуть на ответ Феликса Клинга:

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));
});

обновлено : цвет фона!

Answer 3

Это делает работу ( скрипка ):

$(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;
}​

При использовании :visible вы должны знать об этом:

Элементы с видимостью: скрытые или непрозрачные: 0 считаются видимыми, так как они все еще занимают место в макете. Во время анимации скрыть элемент, элемент считается видимым до конца анимации. Во время анимации, чтобы показать элемент, элемент считается видимым в начале анимации.

Итак, исходя из ваших потребностей, вы бы хотели исключить элементы visibility:hidden и opacity:0.