如何在JavaScript中检测一个元素何时覆盖另一个元素

How to detect when an element over another element in JavaScript?

本文关键字：元素 一个 何时 另一个 覆盖 JavaScript 检测      更新时间：2023-09-26

我写了大部分代码。。。当一个元素"完全"超过另一个元素时，它就起作用了。问题是，我不仅希望当元素"完全"在元素上时它是真的，我还希望当元素部分在另一个元素上时是真的。

这是我的代码：

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

我很困惑，我已经玩了一段时间了，我就是不能让它发挥作用。

标准视频游戏方法：

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

请参阅演示

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

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

这篇帖子可能有助于解释：

jQuery/JavaScript冲突检测

相关文章：