gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 23:39:42 25 4
gpt4 key购买 nike

我是网络开发的新手,我正在构建一个游戏,其目的是避免指针接触动画圆圈。我用 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/

最佳答案

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

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
}

关于javascript - 当动画元素接触鼠标时触发 mouseenter,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32193380/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com