Javascript '；鼠标器'；和'；mouseleave'；事件以div作为光标持续触发

我通过隐藏用户光标并在屏幕上通常显示原始光标的位置显示一个div来创建一个“自定义光标”

现在的问题是，我想在将鼠标悬停在某个元素上时添加一些动画（例如缩放“光标”，或者在本例中缩放充当光标的div）。
在本例中，我制作了一个按钮，并给它一个“mouseenter”和“mouseleave”事件。
当您用光标输入按钮时，I console.log（“回车”）
当您离开按钮时，console.log（“离开”）

您可以很快看到问题：当光标悬停在按钮上时，这两个事件被多次触发，而实际上光标并未离开元素。
还请注意，当您非常缓慢地向左或向上（以直线）悬停时，不会出现此问题，这可能是因为脚本中的“left:e.pageX和top:e.pageY”代码

您可以做些什么来修复此问题，以便两个事件正确触发

$（文档）.ready（函数（）{
var cursor=$（“.cursor”）；
/*光标*/
$（文档）.on（“mousemove”，函数（e）{
cursor.css({
左：e.pageX，
/*或者clientX和clientY*/
上图：e.pageY，
});
});
/*钮扣*/
$（“.btn”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
});
$（“.btn”）.on（“鼠标指针”，函数（）{
控制台日志（“输入”）；
});
$（“.btn”）.on（“mouseleave”，function（）{
控制台日志（“左”）；
});
});
*{
光标：无；
}
.光标{
宽度：10px；
高度：10px；
边界半径：50%；
位置：绝对位置；
背景色：黑色；
}
.btn{
文字装饰：无；
字体系列：无衬线；
字体大小：粗体；
文本转换：大写；
颜色：黑色；
背景色：白色；
边框：4倍纯黑；
填充：0.5雷姆0.8雷姆；
显示：内联块；
利润率：100px 100px；
}

按钮
向
光标添加
指针事件：无
。光标
，使光标（黑点）永远不会成为任何鼠标事件的目标，因此它永远不会影响鼠标进入和离开事件。您可以阅读有关指针事件的更多信息

请参见下面的工作示例：


$（文档）.ready（函数（）{
var cursor=$（“.cursor”）；
/*光标*/
$（文档）.on（“mousemove”，函数（e）{
cursor.css({
左：e.pageX，
/*或者clientX和clientY*/
上图：e.pageY，
});
});
/*钮扣*/
$（“.btn”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
});
$（“.btn”）.on（“鼠标指针”，函数（）{
控制台日志（“输入”）；
});
$（“.btn”）.on（“mouseleave”，function（）{
控制台日志（“左”）；
});
});
*{
光标：无；
}
.光标{
宽度：10px；
高度：10px；
边界半径：50%；
位置：绝对位置；
背景色：黑色；
指针事件：无；
}
.btn{
文字装饰：无；
字体系列：无衬线；
字体大小：粗体；
文本转换：大写；
颜色：黑色；
背景色：白色；
边框：4倍纯黑；
填充：0.5雷姆0.8雷姆；
显示：内联块；
利润率：100px 100px；
}

按钮
问题在于，用户移动的实际隐藏光标与移动以匹配其位置的
.cursor
元素之间存在延迟，这仅仅是由于JS的性能。因此，实际光标可以在一瞬间超出
.cursor
的范围，并在基础按钮上产生
鼠标指针。然后移动
.cursor
，实际光标会在按钮上产生
鼠标移动
，因为它现在位于
.cursor
元素上

最简单的解决方法是使用CSS将光标样式设置为与点匹配的图像，因为它的性能远远优于JS：


$（文档）.ready（函数（）{
$（“.btn”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
});
$（“.btn”）.on（“鼠标指针”，函数（）{
控制台日志（“输入”）；
});
$（“.btn”）.on（“mouseleave”，function（）{
控制台日志（“左”）；
});
});
*{
游标：url（'https://i.imgur.com/SyBk5p5.png汽车,；
}
.光标{
宽度：10px；
高度：10px；
边界半径：50%；
位置：绝对位置；
背景色：黑色；
}
.btn{
文字装饰：无；
字体系列：无衬线；
字体大小：粗体；
文本转换：大写；
颜色：黑色；
背景色：白色；
边框：4倍纯黑；
填充：0.5雷姆0.8雷姆；
显示：内联块；
利润率：100px 100px；
}

按钮
您应该可以使用纯CSS来完成这项工作

因为包含按钮和光标的div都是主体的一部分，所以它们是同一容器的同级。您可以使用它来检测按钮上的悬停，然后依次更改光标的样式

.marginB:hover ~ .cursor { background-color: yellow; }


编辑：如果从按钮上删除100px的边距，则在实际将鼠标悬停在按钮上之前，不会出现悬停效果。在当前CSS中，按钮本身看起来比它作为一段代码实际占用的空间小得多。这就是为什么悬停操作在实际到达按钮之前发生。
将它们放入代码段后，我发现它在jQuery添加的2.2.4版中运行得很好。不，这不是不幸的TypePerfect，如此简单的修复。谢谢大家!@贾斯珀不用担心！！