如何在元素（div，图像）相互接触时触发事件？

Question

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

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

Answer 1

我必须在这里做一些假设。你有对象A，它与wasd键一起移动，你有对象B和C.你已经有一个事件，它监听按下键并移动对象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
}