Как проверить, перекрывает ли элемент другие элементы?

У меня есть два элемента div. Каждый из них имеет ширину и высоту 450 пикселей. Как проверить, перекрывает ли первый div второй div?

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

Я узнал, что могу использовать .getClientRects, чтобы получить границу элемента, но я не совсем уверен, как сравнивать границы.

Пожалуйста, сообщите мне!

Ответ 1

Что-то вроде этого для rect1 и rect2 извлечено через getBoundingClientRect():

var overlap = !(rect1.right < rect2.left || 
                rect1.left > rect2.right || 
                rect1.bottom < rect2.top || 
                rect1.top > rect2.bottom)

Объясните: если одно или несколько выражений в parenthese равны true, там нет перекрытия. Если все false, должно быть перекрытие.

Ответ 2

Вот что я сделал несколько дней назад: https://gist.github.com/yckart/7177551

var AABB = {
  collide: function (el1, el2) {
    var rect1 = el1.getBoundingClientRect();
    var rect2 = el2.getBoundingClientRect();

    return !(
      rect1.top > rect2.bottom ||
      rect1.right < rect2.left ||
      rect1.bottom < rect2.top ||
      rect1.left > rect2.right
    );
  },

  inside: function (el1, el2) {
    var rect1 = el1.getBoundingClientRect();
    var rect2 = el2.getBoundingClientRect();

    return (
      ((rect2.top <= rect1.top) && (rect1.top <= rect2.bottom)) &&
      ((rect2.top <= rect1.bottom) && (rect1.bottom <= rect2.bottom)) &&
      ((rect2.left <= rect1.left) && (rect1.left <= rect2.right)) &&
      ((rect2.left <= rect1.right) && (rect1.right <= rect2.right))
    );
  }
};

Ответ 3

element.getBoundingClientRect() хорошо работает в современных браузерах, обеспечивает ограничение по отношению к экрану. посмотрите здесь Затем проверьте, перекрываются ли ограничивающие поля, то есть простая геометрия...

Ой извините меня... нашел ваше редактирование слишком поздно...

Ответ 4

В Internet Explorer раньше, чем версия 8, возвращаемый объект TextRectangle содержит координаты в размере физического пикселя, а с версии 8 - содержит координаты в размере логического пикселя.

Если вам нужен ограничивающий прямоугольник всего элемента, используйте метод getBoundingClientRect.