javascript - 当动画元素接触鼠标时触发 mouseenter

Question

我是网络开发新手，正在构建一个游戏，其目标是避免指针接触动画圆圈。我使用 mouseenter 事件进行了设置(下面是完整的 JSFiddle):

$("#"+circleName).mouseenter(function(){
    $(this).attr("class", "redcircle");
    });

当用户将指针移入圆圈时，圆圈会变成红色。然而，当鼠标静止时，圆圈可以安全地穿过它。有更好的方法吗？

通过将mouseenter事件更改为hover事件，当动画圆圈接触静止鼠标时触发该事件。不过，似乎有延迟。有谁知道为什么会这样？

这听起来像是与此处发现的问题有关，这意味着它可能与相关的浏览器错误有关:

getting a mouseenter event from a still mouse entering an animated element

fiddle :http://jsfiddle.net/nbsteuv/6yok3s56/4/

Answer 1

我会存储最后的鼠标位置，然后每当圆移动时，检查它是否与鼠标位置相交。

var mouseX, mouseY;

$( "#container-element-id" ).mousemove(function( event ) {
  mouseX = event.pageX;
  mouseY = event.pageY;
});

定义一个函数来计算一个点是否在圆内...

function isPointInCircle(pX, pY, cX, cY)
{
    // Do some math here
}

然后，在动画代码中，每当圆圈移动时，检查是否有交叉点...

if(isPointInCircle(mouseX, mouseY, circle.left, circle.top))
{
    // color circle red
}