檢測一個元素是否在父級的外邊界之外

Question

我創建了一個lightbox jQuery插件，並且在lightbox（圖像）裏面有絕對定位的元素（在圖像內）。

這些元件將在紅色圖像的頂部被隨機地加入。目前，這些藍色正方形將重疊紅色圖像的外邊界。

如何檢測此行爲？藍色有時會隱藏起來，然後在click上，它會擴展到紅色的外邊界。

Answer 1

您可以找到每個元素的邊界框，並快速比較邊緣以檢測它是否在元素內部或外部。

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')));

.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; 
 
    
 
}

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

Answer 2

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

的.POSITION（）方法允許我們檢索 當前位置的元素（特別是它的餘量框）相對於所述偏移父母 （特別是其填充框，其不包括邊距和邊框）。

但是，這不適用於隱藏的元素。 （當你需要檢測重疊時，不太清楚）。

如果藍色元素不是藍色的子元素，則可以使用https://api.jquery.com/offset/代替。

的.offset（）方法允許我們檢索 元件相 到文檔（特別是其邊界框，其中不包括頁邊距）的當前位置。