检测元素是否在其父元素的外边界之外

Question

我正在创建一个灯箱jQuery插件，并且在灯箱（图片）中有绝对定位的元素（在图像内）。

这些元素将被随机添加到红色图像的顶部。目前，这些蓝色方块将与红色图像的外边界重叠。

如何检测此行为？蓝色有时会被隐藏，然后，在click上，它会在红色的外边界上扩展。

Answer 1

您可以使用https://api.jquery.com/position/

  

.position（）方法允许我们检索当前位置   相对于偏移父项的元素（特别是其边距框）   （特别是它的填充框，不包括边距和边框）。

但是，这对隐藏元素不起作用。 （当你需要检测重叠时，目前还不是很清楚。）

如果蓝色元素不是蓝色元素，则可以使用https://api.jquery.com/offset/代替。

  

.offset（）方法允许我们检索一个的当前位置   元素（特别是它的边框，不包括边距）相对   到文件。

Answer 2

您可以找到每个元素的边界框并快速比较边缘，以检测它是否在元素内部或外部。

＆＃13;

＆＃13;

var isItIn = function(parent, child) {
  var box1coords = parent.getBoundingClientRect();
  var box2coords = child.getBoundingClientRect();

  if (
    box2coords.top < box1coords.top || 
    box2coords.right > box1coords.right ||
    box2coords.bottom > box1coords.bottom || 
    box2coords.left < box1coords.left) {

    return true;
  }
  
  return false;
  
}

console.log(isItIn(document.querySelector('.box1'), document.querySelector('.box2')));

console.log(isItIn(document.querySelector('.box1'), document.querySelector('.box3')));

＆＃13;

.box1 {
  width: 400px;
  height: 400px;
  background-color: red;
  position: absolute;
  top: 100px;
  left: 100px;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  top: 50px;
  left: 300px;
  
}

.box3 {
  width: 50px;
  height: 50px;
  background-color: green;
  position: absolute;
  top: 200px;
  left: 150px;
  
}

＆＃13;

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

＆＃13;

＆＃13;

＆＃13;