鼠标滚轮滚动动画结束后捕获光标下的列表项答案

【问题标题】：Capture list item under cursor after mouse wheel scroll animation ends鼠标滚轮滚动动画结束后捕获光标下的列表项
【发布时间】：2018-02-08 04:46:05
【问题描述】：

我希望这很受欢迎。

我注意到，由于鼠标 wheel 事件，当鼠标进入元素时，JavaScript onMouseEnter 事件不会触发。

此外，wheel 事件的event.target 捕获事件触发时光标所在的元素（不是滚动动画后光标下方的元素）。

鼠标滚轮的滚动动画结束后，有什么办法可以捕捉到光标下的元素？

更新：这只发生在 Edge 中。

【问题讨论】：

【解决方案1】：

onmouseenter 确实会在鼠标由于滚轮事件而进入元素时触发，而 event.target 确实会在动画具有完成了。

如果您不是这种情况，则您可能遇到 CSS overflow 问题，导致您的元素之一与您尝试定位的元素重叠。

在滚动后定位元素所需要做的就是检查e.target，如下所示：

document.getElementById('outer').onmouseover = e => {
  console.clear();
  console.log(e.target);
}

#outer {
  border: 1px solid black;
  padding: 50px;
  margin: 300px 0 200px 0;
}

#inner {
  background: cyan;
  padding: 10px;
}

<div id="outer">
  <span id="inner">Mouse over me!</span>
</div>

希望这会有所帮助！

【讨论】：

在 Edge 中，如果我将鼠标悬停在外部 div 中并使用鼠标滚轮将光标置于内部 div 上，控制台仍然显示 <div id="outer">…</div>。这仅在您在滚动动画期间不移动光标时才有效。我正在检查其他浏览器是否是这种情况。
好的，所以我在 Chrome 中尝试了它，它就像你说的那样工作。我想知道这是否是 Edge 的问题...
我更新了问题，表明问题只出现在 Microsoft Edge 浏览器中。