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

Question

我希望这很受欢迎。

我注意到当鼠标作为鼠标onMouseEnter事件的结果输入元素时，JavaScript wheel事件不会触发。

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

鼠标滚轮执行滚动动画完成后，有没有办法捕捉光标下面的元素？

更新：这只发生在Edge。

此处已打开错误报告：https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15836400/

Answer 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>

希望这有帮助！