如何在元素(div、图像)相互接触时触发事件

Question

我想知道当一个元素（图像）接触、进入、越过等另一个元素（包含另一个图像的div）时，是否有可能触发jquery事件（显示一个）的内容。

我正在玩一个只使用 Javascript、CSS 和 HTML 的愚蠢的小游戏，我试图弄清楚如何部署一个事件，就像 .click（） 或任何其他当角色（图像）触摸或进入另一个元素（一个带有图像的div）时。我让角色（一个图像元素）使用 w、a、s、d 四处移动，我希望它在触摸某物时触发事件。

Answer 1

我必须在这里做一些假设。 你有对象 A，它随着 wasd 键移动，你有对象 B 和 C。 您已经有一个事件，该事件侦听 wasd 按键并移动对象 A。 移动对象 A 后，需要计算 A 的边界（左、右、上、下），并与对象 B 和对象 C 的边界进行比较。

您可以使用 $element.offset（） 获取左侧和顶部，然后右侧是左侧 + 宽度，底部是顶部 + 高度。

因此，一旦你对所有对象都有了它，对象就会相交：

aTopOverlap = a.top > b.top && a.top < b.bottom;
aBottomOverlap = a.bottom > b.top && a.bottom < b.bottom;
aLeftOverlap = a.left > b.left && a.left < b.right;
aRightOverlap = a.right > b.left && a.right < b.left;
aVerticalOverlay = b.top > a.top && b.bottom < a.bottom;
aHorizontalOverlay = b.left > a.left && b.right < a.right;
if ((aTopOverlap || aBottomOverlap || aVerticalOverlay) && (aLeftOverlap || aRightOverlap || aHorizontalOverlay)) {
    //collision logic here
}