Question

我已经在谷歌和这里搜索了这个但是没有找到适合我的问题的答案

（这是一个非常简化的解释）我有两个div可以由用户移动（使用JavaScript和点击事件）我需要检测两个div是否触摸/在彼此之上，如果他们要触发一个函数，我在这里看到了答案，但他们都使用jQuery，我想使用纯JS

可能有用的东西是两个div都有位置绝对和不同的z-index在css中设置

编辑：为了清理事情，因为我的解释非常差，两个div中的一个是静止的，第二个只能在Y方向上移动但是在Y方向上移动的div是使用案例动画旋转

Answer 1

试 Element.getBoundingClientRect() 在div和它们的坐标上你可以collision detection

Answer 2

可能有更好的方法（这不是非常干）但它应该有效，只需用你的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
}

Answer 3

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

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

Answer 4

由于您允许用户移动DIV并且它们都是绝对的，因此您必须能够访问DIV的STYLE属性。

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

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

由于它们都是矩形，你可以查看dev A的顶部或底部是否在div B的顶部和底部之间，如果左边或右边是dev B的左边和右边。

关于这一点的一个好处是你只需要检查A - >; B因为在两个测试中都会检测到任何重叠。

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

值得注意的是，如果你正在使用CSS / JS动画，你可能希望扩大“碰撞区域”。如果你有高速移动的物体。否则，项目可能会在检查之间进行。

Answer 5

这类似于当前的正确答案，但我为解决此问题所做的工作如下。

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

请注意，此功能无法很好地配合转换。

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

5 个答案: