Подтвердить что ты не робот

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

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

4b9b3361

Ответ 1

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

Update:

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

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

Ответ 2

Я не мог перестать прыгать на Felix Kling:

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

обновлено: background-color!

Ответ 3

Это выполняет задание (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;
}​

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

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

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