当 window.scroll 事件发生时，如何获取我的光标所在的元素？

Question

<div id="div1">d1</div>
<div id="div2">d2</div>
<div id="div3">d3</div>

window.addEventListener('scroll', e => {
  console.log(e.target);
})

window.addEventListener('click', e => {
  console.log(e.target);
})

div {
  width: 100%;
  height: 150px;
  margin: 12px;
  background: green;
  text-align: center;
  line-height: 150px;
  color: white;
  font-size: 2rem;
}

在上面的代码中，当我的光标在 div 上时触发滚动事件时，事件目标始终是 HTML 文档。我想获取目标元素，例如点击事件的目标。它用于实现仅当光标位于我为此目的创建的 div 上时才触发滚动动画的功能。

Answer 1

您可以使用 :hover 选择器来获取当前悬停的所有元素。如果您只对其中的几个感兴趣，那么您可以使用其他选择器（例如特定的 class .

window.addEventListener("scroll", e => {
  document.querySelector(".hovered")?.classList.remove("hovered");
  document.querySelector(".target:hover")?.classList.add("hovered");
})

div.target {
  width: 100%;
  height: 150px;
  margin: 12px;
  background: green;
  text-align: center;
  line-height: 150px;
  color: white;
  font-size: 2rem;
}
.target.hovered {
  background: yellow
}

<div class="target" id="div1">d1</div>
<div class="target" id="div2">d2</div>
<div class="target" id="div3">d3</div>

Answer 2

由于您的功能依赖于鼠标悬停而不是任何其他设备，也许您可以使用 wheel 事件而不是 scroll ?

当 window.scroll 事件发生时，如何获取我的光标所在的元素？

How to get the element my cursor positioned over when a window.scroll event occurs?

html

javascript

scroll