如何在 JavaScript 中检测一个元素何时超过另一个元素？答案

【问题标题】：How to detect when an element over another element in JavaScript?如何在 JavaScript 中检测一个元素何时超过另一个元素？
【发布时间】：2012-03-07 18:44:39
【问题描述】：

我编写了大部分代码......当元素“完全”超过另一个元素时，它可以工作。问题是我不仅希望当元素“完全”在元素上方时它是真的，我还希望当元素部分地在另一个元素上时它也是真的。

这是我的代码：

    element = this.element.getStyles('left', 'top', 'width', 'height');
    elementLeftX = element.left.toInt();
    elementLeftY = element.top.toInt();
    elementRightX = (element.width.toInt() + element.left.toInt());
    elementRightY = (element.top.toInt() + element.height.toInt());

    el = this.positions ? this.positions[i] : this.getDroppableCoordinates(el); // Element drop area
    elLeftX = el.left.toInt();
    elLeftY = el.top.toInt();
    elRightX = (el.width.toInt() + el.left.toInt());
    elRightY = (el.height.toInt() + el.top.toInt());

   if (((elLeftY <= elementLeftY) && (elementLeftY <= elRightY)) && ((elLeftY <= elementRightY) && (elementRightY <= elRightY))) {
        if (((elLeftX <= elementLeftX) && (elementLeftX <= elRightX)) && ((elLeftX <= elementRightX) && (elementRightX <= elRightX))) {
            return true;
        } else {
            return false;
        }
    } else {
        return false;
    }

我很困惑，我已经玩了一段时间了，我就是无法让它工作。

【问题讨论】：

获取一个项目的样式不会给你它的绝对位置。如果该项目被包裹在另一个有自己定位的元素中，那会怎样？更多需要在这里考虑。
是的，这不是一个真正的问题。我认为调整起来并不难。

标签： javascript mootools mootools-more

【解决方案1】：

标准视频游戏方法：

doElsCollide = function(el1, el2) {
    el1.offsetBottom = el1.offsetTop + el1.offsetHeight;
    el1.offsetRight = el1.offsetLeft + el1.offsetWidth;
    el2.offsetBottom = el2.offsetTop + el2.offsetHeight;
    el2.offsetRight = el2.offsetLeft + el2.offsetWidth;

    return !((el1.offsetBottom < el2.offsetTop) ||
             (el1.offsetTop > el2.offsetBottom) ||
             (el1.offsetRight < el2.offsetLeft) ||
             (el1.offsetLeft > el2.offsetRight))
};

See demo

【讨论】：

我注意到，这不仅会在重叠时返回 true，而且在它们接触但不重叠时也会返回 true。如果您只想重叠，请将<s 和>s 更改为<= 和>=。 jsfiddle.net/Emy49/1
请记住这两个元素都必须在 DOM 中可见！因此，例如，如果您是 appendChild 新元素到当前 DOM，请确保在调用上述函数之前执行此操作。如果您向现有 DOM 添加新元素，此信息对 Google 扩展开发人员特别有用。另外，在我的情况下，我无法获得 offset 值，所以我通过调用 let el1Val = el1.getBoundingClientRect() 获得它们，然后将变量替换为，例如el1Val.bottom <= el2.offsetTop.

【解决方案2】：

如果您有兴趣使用 jQuery（或者如果您已经有兴趣），可以使用一些很棒的碰撞检测插件。这是以前的答案，详细说明了https://stackoverflow.com/a/6052254/374866

【讨论】：

【解决方案3】：

当您尝试时称为“碰撞检测”。您需要获取元素的 COMPUTED 偏移量和尺寸，而不仅仅是元素的样式声明。

这篇文章可能有助于解释：

jQuery/JavaScript collision detection

【讨论】：