当动画元素接触鼠标时触发 mouseenter答案

【问题标题】：Trigger mouseenter when an animated element touches mouse当动画元素接触鼠标时触发 mouseenter
【发布时间】：2015-08-24 23:36:41
【问题描述】：

我是 Web 开发的新手，我正在构建一个游戏，其中的对象是避免用指针接触动画圆圈。我使用 mouseenter 事件（下面是完整的 JSFiddle）进行了设置：

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

当用户将指针移入圆圈时，这会将圆圈变为红色。但是，当鼠标静止时，圆圈可以安全地通过它。有没有更好的方法来做到这一点？

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

这听起来与这里发现的问题有关，这意味着它可能与相关的浏览器错误有关：

【问题讨论】：

不确定是否有这样的事件可以从 JS 中触发。我建议跟踪鼠标的位置并检查它是否在圆圈的范围内。
这可能会有所帮助，因为您需要位置 - 当没有事件时：stackoverflow.com/questions/2601097/…... 或没有，实际上... :(

【解决方案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
}

【讨论】：