Javascript 如何检测两个div是否接触/碰撞检测

我在谷歌和这里搜索过，但没有找到适合我的问题的答案

（这是一个非常简单的解释） 我有两个div，用户可以移动它们（使用JavaScript和单击事件），我需要检测这两个div是否相互接触/重叠，以及它们是否要触发一个函数，我在这里看到了答案，但它们都使用jQuery，我想使用纯JS

可能有用的是，两个div都在css中设置了位置绝对和不同的z索引

编辑：为了澄清问题，因为我的解释非常糟糕，两个div中的一个是静止的，第二个只能在Y方向移动，但在Y方向移动的div正在使用大小写动画旋转 在这两个div上，您可以使用它们的坐标执行

，Anand Thangappan可以使用它来获得元素的计算位置。然后，您可以使用getComputedStyle（）获得计算出的宽度和高度，并使用简单的不等式检查测试它们是否相交

---

编辑：或者，您可以直接读取它们的位置值，因为您使用的是绝对位置。然后，您可以跳过获取元素的计算位置的更复杂的方法。

因为您允许用户移动div，并且它们都是绝对的，所以您必须能够访问div的样式属性

获取顶部、左侧、宽度和高度属性

计算底部和右侧属性。现在你有了所有的四个角坐标

因为它们都是矩形，所以可以检查dev A的顶部或底部是否在div B的顶部和底部之间，以及左侧或右侧是否在dev B的左侧和右侧之间

其中一个好处是，您只需检查A->B，因为在两个测试中都会检测到任何重叠

这是因为形状是直线性质的。如果这些是三角形或五边形，或者它们不是凸面形状，情况会更复杂

---

值得注意的是，如果使用CSS/JS动画，如果对象高速移动，则可能希望放大“碰撞区域”。否则，项目可能会在检查之间通过。

可能有更好的方法（这不是很简单），但它应该可以工作，只需用您的div id替换“div1”和“div2”：

let div1 = document.getElementById('div1').getBoundingClientRect();
let div1Top = div1.top;
let div1Left = div1.left;
let div1Right = div1.right
let div1Bottom = div1.bottom

let div2 = document.getElementById('div2').getBoundingClientRect();
let div2Top = div1.top;
let div2Left = div1.left;
let div2Right = div1.right
let div2Bottom = div1.bottom

if ((div2Top > div1Top && div2Top < div1Bottom)||(div2Bottom > div1Top && div2Bottom < div1Bottom)) {
  let verticalMatch = true
} else{
  let verticalMatch = false
}

if ((div2Right > div1Left && div2Right < div1Right)||(div2Left < div1Right && div2Left > div1Left)) {
  let horizontalMatch = true
} else {
  let horizontalMatch = false
}

if (horizontalMatch && vertialMatch){
  let intersect = true
} else {
  let intersect = false
}

let div1=document.getElementById（'div1'）.getBoundingClientRect（）；
设div1Top=div1.top；
设div1Left=div1.left；
让div1Right=div1.right
让div1Bottom=div1.bottom
设div2=document.getElementById（'div2'）.getBoundingClientRect（）；
设div2Top=div1.top；
设div2Left=div1.left；
让div2Right=div1.right
让div2Bottom=div1.bottom
if（（div2Top>div1Top&div2Topdiv1Top&div2Bottomdiv1Left&&div2lightdiv1Left））{
让水平匹配=真
}否则{
设水平匹配=false
}
if（水平匹配和垂直匹配）{
让相交=真
}否则{
让相交=假
}

这与当前的正确答案类似，但我解决这个问题的方法如下

let d1 = document.getElementById('div1').getBoundingClientRect();
let d2 = document.getElementById('div2').getBoundingClientRect();

function touching(div1,div2){
    let ox = Math.abs(d1.x - d2.x) < (d1.x < d2.x ? d2.width : d1.width);
    let ox = Math.abs(d1.y - d2.y) < (d1.y < d2.y ? d2.height : d1.height);
    return ox && oy;
}

var t = touching(d1,d2) // should return whether they are touching

let d1=document.getElementById（'div1'）.getBoundingClientRect（）；
设d2=document.getElementById（'div2'）.getBoundingClientRect（）；
功能触摸（第1部分，第2部分）{
设ox=Math.abs（d1.x-d2.x）<（d1.x

---

请注意，此函数不能很好地处理变换。

那么，您有两个框的所有坐标和大小，您只需要检查4个不等式，对吗？我的意思是，这些只是笛卡尔坐标系中的两个矩形。@NiVeR它不是post 5419134的副本，因为他们要求使用jQuery解决方案，而我要求的是不使用jQuery的解决方案，只需稍作修改，您的代码工作得很好，非常感谢：）