Вход

Просмотр полной версии : Определить перекрыт ли элемент другим элементом

arch_7
21.12.2015, 17:16
Доброго дня!

Нужно определить перекрывают ли элемент другие элементы. Элементы которые могут перекрыть и их стили не известы.
Пока что, единственным решением было пройтись по всему DOM, проверяя координаты пересечения и z-index. JSFIDDLE (http://jsfiddle.net/rd2d2/b1ooy05y/22/)
Проблема в том, что если у родителя будет стоять z-index, перекрытие будет ложным.
Может есть другое решение этой задачи?


var e = document.getElementById('e');
var eR = e.getBoundingClientRect();
var all = document.getElementsByTagName('*');
for (var i=0, max=all.length; i < max; i++) {
var cR = all[i].getBoundingClientRect();
if(all[i] != e) {
if (((cR.top <= eR.top) && (eR.top <= cR.bottom)) &&
((cR.top <= eR.bottom) && (eR.bottom <= cR.bottom)) &&
((cR.left <= eR.left) && (eR.left <= cR.right)) &&
((cR.left <= eR.right) && (eR.right <= cR.right))) {
var style = window.getComputedStyle ? getComputedStyle(all[i]) : all[i].currentStyle;
if(style.zIndex >= 1) {
console.log(style.zIndex);
}
}
}
}
madCoder
22.12.2015, 04:11
мало информации , пока могу посоветовать только
Генерация событий на элементах https://learn.javascript.ru/dispatch-events

вешаешь события на document и имитируешь клик по координатам и дальше просто проверяешь это тот элемент который тебе нужен или нет
arch_7
22.12.2015, 19:44
madCoder, спасибо за совет!
Подскажите пожалуйста, каким образом можно проверить над каким элементом было событие? В примере нужный элемент перекрыт красным дивом. https://jsfiddle.net/rd2d2/hkqqr53L/
madCoder
22.12.2015, 20:36
https://developer.mozilla.org/en-US/docs/Web/API/Document/elementFromPoint


<style>
.wrap {
position: absolute;
background-color: rgba(255, 0, 0, 0.69);
width: 200px;
height: 200px;
top: 0;
left: 0;
}
</style>

<body>
<div class="wrap"></div>
<span id="elem" onmouseover="alert();">elem</span>
</body>


<script>

var elem = document.getElementById('elem');

var x = elem.offsetLeft, y = elem.offsetTop;

console.log(document.elementFromPoint(x, y))



</script>
arch_7
23.12.2015, 00:48
Большое вам спасибо! То что нужно.