Определить перекрыт ли элемент другим элементом
Доброго дня!
Нужно определить перекрывают ли элемент другие элементы. Элементы которые могут перекрыть и их стили не известы. Пока что, единственным решением было пройтись по всему DOM, проверяя координаты пересечения и z-index. JSFIDDLE Проблема в том, что если у родителя будет стоять 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);
}
}
}
}
|
мало информации , пока могу посоветовать только
Генерация событий на элементах https://learn.javascript.ru/dispatch-events вешаешь события на document и имитируешь клик по координатам и дальше просто проверяешь это тот элемент который тебе нужен или нет |
madCoder, спасибо за совет!
Подскажите пожалуйста, каким образом можно проверить над каким элементом было событие? В примере нужный элемент перекрыт красным дивом. https://jsfiddle.net/rd2d2/hkqqr53L/ |
https://developer.mozilla.org/en-US/...ementFromPoint
<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>
|
Большое вам спасибо! То что нужно.
|
| Часовой пояс GMT +3, время: 18:55. |