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

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

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

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

Пожалуйста, посоветуй мне!


javascript boundary
person Moon    schedule 22.08.2012    source источник
comment
stackoverflow.com/questions/4230029/ можете ли вы увидеть, если это поможет вам.   -  person user1071979    schedule 22.08.2012
comment
Итак, вы спрашиваете, что, учитывая массив ограничивающих прямоугольников, как определить, какие из них перекрываются?   -  person Blender    schedule 22.08.2012
comment
Просто любопытно, почему он помечен как дублированный, поскольку в OP нет ссылки на jQuery.   -  person Miraage    schedule 20.03.2018

Ответы (4)


arrow_upward
125
arrow_downward

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

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

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

person Buu Nguyen    schedule 22.08.2012
comment
Только что понял, что это работает только в том случае, если оба элемента в данный момент видны — позор! - person graygilmore; 08.02.2014
comment
Даст ли переключение логики на использование && небольшой прирост производительности в тех случаях, когда они не перекрываются? - person Brook Jordan; 25.07.2017
comment
Удаление отрицания и перестановка проверок делает код быстрее и проще для понимания. Кроме того, с текущей проверкой края могут соприкасаться, а не перекрываться. Разница между < и <=. - person Guido Bouman; 18.04.2018
comment
в firefox с 2 фиксированными элементами не работает - person manuel-84; 01.02.2019

arrow_upward
17
arrow_downward

Вот что я сделал несколько дней назад: 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))
    );
  }
};
person yckart    schedule 27.10.2013
comment
Внутри можно упростить до: rect1.top <= rect2.bottom && rect1.bottom >= rect2.top && rect1.left <= rect2.right && rect1.right >= rect2.left - person Brook Jordan; 25.07.2017

arrow_upward
2
arrow_downward

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

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

person philipp    schedule 22.08.2012

arrow_upward
1
arrow_downward

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

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

person Vishal Suthar    schedule 22.08.2012