判斷兩個div塊是否碰撞

這是一道面試題，當時面試官問的是如何判斷頁面中兩個元素是否發生碰撞（當時太久沒有練習DOM方面的操作的api了，沒有想到，現在又研究了一下）

場景：一個container容器中，有兩個正方形方塊，顏色分別為yellow，blue

給container容器綁定了mousehover事件，鼠標和yellow的方塊同步移動，當yellow接觸到bule時，控制台輸出true，表示碰撞到了

主要思路：通過獲取元素的offsetLeft，offsetWidth，offsetTop，offsetHeight可以分別獲取位置關系，通過以下分別獲取yellow和blue的偏移

// L，R，T，B分別表示 div元素的left,right,top,bottom距離父級元素的偏移量
var L = div.offsetLeft;
var R = div.offsetLeft + obj1.offsetWidth;
var T = div.offsetTop;
var B = div.offsetTop + obj1.offsetHeight;

判斷是否接觸的邏輯：

yellowL表示yellow div元素的左偏移；blueL表示blue div元素的左偏移；

// yellowR < blueL：yellow右邊 在 blue左邊 的左方
// yellowL > blueR：yellow左邊 在 blue右邊 的右方
// yellowB > blueT：yellow底邊 在 blue頂邊 的上方
// yellowT < blueB：yellow頂邊 在 blue底邊 的下方
// 以上四種情況都表示不會接觸
if( yellowR < blueL || yellowL > blueR || yellowB > blueT || yellowT < blueB ){
      return false 		           
}else {
      // 碰撞 
      return true
}