Самый эффективный способ проверить, перекрываются ли элементы

Question

Я знаю, что вы можете вычислить, перекрывает ли элемент другой, сравнивая свойства top | bottom | right | left в методе getBoundingClientRect. Тем не менее, вам нужно l oop через элементы, чтобы сделать это. Мне любопытно узнать, как эффективный способ проверить, перекрывает ли элемент какой-либо другой элемент. Например, проверка того, накладывается ли метка 1 на какой-либо другой элемент. Затем проверьте, не перекрывает ли метка два какой-либо другой элемент, включая метку один, без использования al oop каждый раз, или это единственный способ?

const randomColor = "#" + ((1 << 24) * Math.random() | 0).toString(16);
// dismiss -- just creating less CSS
document.querySelectorAll('.label').forEach((x, i) => {
  document.querySelectorAll('.label')[i].style.background = "#" + ((1 << 24) * Math.random() | 0).toString(16);
});

function overlayCheck() {
  let points = document.querySelectorAll('.label');
  let rightPos = (elem) => elem.getBoundingClientRect().right;
  let leftPos = (elem) => elem.getBoundingClientRect().left;
  let topPos = (elem) => elem.getBoundingClientRect().top;
  let btmPos = (elem) => elem.getBoundingClientRect().bottom;

  for (let i = 1; i < points.length; i++) {
    if (!(
        rightPos(points[i]) < leftPos(points[i - 1]) ||
        leftPos(points[i]) > rightPos(points[i - 1]) ||
        btmPos(points[i]) < topPos(points[i - 1]) ||
        topPos(points[i]) > btmPos(points[i - 1])
      )) {
      points[i].innerHTML = `${points[i].innerHTML} C`;
      console.log(i);
    }
    if (i === points.length - 1) {
      return
    }
  }
}

overlayCheck();

.parent {
  position: relative;
  display: flex;
}

.label {
  height: 75px;
  left: 0;
  width: 100px;
  margin-left: 10px;
  background-color: orange
}

.cover {
  width: 220px;
  position: absolute;
  left: 0;
  height: 50px;
  bottom: 0;
}

<div class="parent">
  <div class="label cover">Label 1</div>
  <div class="label">Label 2</div>
  <div class="label">Label 3</div>
  <div class="label">Label 4</div>
  <div class="label">Label 5</div>
  <div class="label">Label 6</div>
</div>

Answer 1

Я нашел способ проб и ошибок. Я опубликую это здесь для всех, кто мог бы использовать это.

// dismiss -- just creating less CSS
const randomColor = "#" + ((1 << 24) * Math.random() | 0).toString(16);
document.querySelectorAll('.label').forEach((x, i) => {
  document.querySelectorAll('.label')[i].style.background = "#" + ((1 << 24) * Math.random() | 0).toString(16);
});

//function to check for overlapping
function overlayCheck() {
  let points = document.querySelectorAll('.label');
  let rightPos = (elem) => elem.getBoundingClientRect().right;
  let leftPos = (elem) => elem.getBoundingClientRect().left;
  let topPos = (elem) => elem.getBoundingClientRect().top;
  let btmPos = (elem) => elem.getBoundingClientRect().bottom;

  for (let i = 0; i < points.length; i++) {
    for (let j = 0; j < points.length; j++) {
      let isOverlapping = !(
        rightPos(points[i]) < leftPos(points[j]) ||
        leftPos(points[i]) > rightPos(points[j]) ||
        btmPos(points[i]) < topPos(points[j]) ||
        topPos(points[i]) > btmPos(points[j])
      );

      if (isOverlapping && j !== i) {
        points[i].innerHTML = `${points[i].innerHTML} C`;
      }
    }
  }
}
overlayCheck();

.parent {
  position: relative;
  display: flex;
}

.label {
  height: 75px;
  left: 0;
  width: 100px;
  margin-left: 10px;
  background-color: orange
}

.cover {
  width: 220px;
  position: absolute;
  left: 0;
  height: 50px;
  bottom: 0;
}

<div class="parent">
  <div class="label cover">Label 1</div>
  <div class="label">Label 2</div>
  <div class="label">Label 3</div>
  <div class="label">Label 4</div>
  <div class="label">Label 5</div>
  <div class="label">Label 6</div>
</div>