Форум

arch_7 · #1 (**permalink**) 21.12.2015, 17:16

Доброго дня!

Нужно определить перекрывают ли элемент другие элементы. Элементы которые могут перекрыть и их стили не известы.
Пока что, единственным решением было пройтись по всему 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);
          }
    }
  }
}

madCoder · #2 (**permalink**) 22.12.2015, 04:11

мало информации , пока могу посоветовать только
Генерация событий на элементах https://learn.javascript.ru/dispatch-events

вешаешь события на document и имитируешь клик по координатам и дальше просто проверяешь это тот элемент который тебе нужен или нет

arch_7 · #3 (**permalink**) 22.12.2015, 19:44

madCoder, спасибо за совет!
Подскажите пожалуйста, каким образом можно проверить над каким элементом было событие? В примере нужный элемент перекрыт красным дивом. https://jsfiddle.net/rd2d2/hkqqr53L/

madCoder · #4 (**permalink**) 22.12.2015, 20:36

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>

arch_7 · #5 (**permalink**) 23.12.2015, 00:48

Большое вам спасибо! То что нужно.

Форум

Справочник

Discord чат

Курсы javascript