如何检测光标悬停在一个元素而不移动它？答案

【问题标题】：How to detect that the cursor hovers an element without moving it?如何检测光标悬停在一个元素而不移动它？
【发布时间】：2019-10-30 16:51:54
【问题描述】：

我正在构建一个网页应用程序，其中的页面具有上一个/下一个导航按钮。这是一个单页 React 应用程序，当导航按钮悬停时，上一页或下一页的数据会被预取。

当用户在不移动鼠标的情况下单击“下一步”两次时，虽然鼠标一直悬停在按钮上（在每个页面上的相同位置），但不会预加载第三页的数据，因为 mouseover除非每次页面加载后鼠标至少移动 1px，否则事件不会触发。

有没有一种方法可以在不移动光标的情况下检测鼠标悬停事件，这不涉及手动检查按钮的尺寸，特别是通过getBoundingClientRects() 并与光标clientX/clientY 页面上的坐标进行比较加载？

提前致谢！

【问题讨论】：

您可以将鼠标悬停状态保持在您的 React 状态，并使用 mounseenter 和 mouseleave 进行切换。
mouseover 将let currently_active_button 设置为悬停按钮。 mouseout 将其重置为空。这样你就可以知道最后一个mouseovered 按钮是哪个。

【解决方案1】：

正如 jalynn2 和 Shilly 所建议的那样，最好将此属性存储为 onMouseEnter 上的布尔值 true 状态，反之亦然 onMouseLeave

【讨论】：