Есть ли простой способ найти все элементы DOM, которые "покрывают" (то есть имеют в пределах своих границ) пиксель с координатной парой X/Y?
Расположение элемента DOM по абсолютным координатам
Ответ 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
.