JavaScript mouseover 和 mouseleave 事件

Question

我在相同的元素上有一个mouseover 和mouseleave 事件监听器，当您mouseover 它添加一个类而mouseleave 删除该类。

我正在运行forEach，因此当您mouseover 特定项目时，它会显示该项目的特定文本块。这就是我使用 JS 而不是纯 CSS 的原因。

我正在寻找优化以下代码的方法。

const pageNavRings = document.querySelectorAll('.page-nav-ring')

pageNavRings.forEach((pageRing) => {
  pageRing.addEventListener('mouseover', (e) => {
    const pageRingParent = e.target.closest('.page-nav__list--item')
    pageRingParent.querySelector('.page-nav-label').classList.add('is-visible')
  })

  pageRing.addEventListener('mouseleave', (e) => {
    const pageRingParent = e.target.closest('.page-nav__list--item')
    pageRingParent.querySelector('.page-nav-label').classList.remove('is-visible')
  })
})

似乎这段代码可以写得更好，更DRY。非常感谢所有和任何帮助。

Answer 1

我试图使它更紧凑和清晰。不确定您的 html，所以使用parentElement 获取标签。

    const rings = document.querySelectorAll('.page-nav-ring')

    rings.forEach((ring) => {
        const label = ring.parentElement.querySelector('.page-nav-label');
        ring.addEventListener('mouseover', () => { label.classList.add("is-visible") });
        ring.addEventListener('mouseleave', () => { label.classList.remove("is-visible") });
    });

Answer 2

const pageNavRings = document.querySelectorAll('.page-nav-ring')

pageNavRings.forEach(pageRing => {
  // Move everything into `handler` function
  // to make use of scoping (you will see why later)
  pageRing.addEventListener('mouseover', handler);
})

function handler(e){
  // Cache these values using variable
  const className = 'is-visible';
  const pageRingParent = e.target.closest('.page-nav__list--item')
  const pageRingLabel = pageRingParent.querySelector('.page-nav-label');

  pageRingLabel.classList.add(className);

  // Add `mouseleave` event listener in this handler is fine
  // Because it doesn't need to listen to this event
  // before everything started anyway
  this.addEventListener('mouseleave', e => {
    // Using the values from the const above,
    // You don't have to use `e.target.closest` and `querySelector` again
    pageRingLabel.classList.remove(className);
  });
}

Answer 3

我会在不使用 JavaScript 而使用 CSS 的情况下解决这个问题：

.page-nav-ring > .page-nav__list--item {
   opacity: 1;
}
.page-nav-ring > .page-nav__list--item:hover {
   opacity: 0.1;
}

<ul class="page-nav-ring">
  <li class="page-nav__list--item">Hello World</li>
  <li class="page-nav__list--item">Hello World 2</li>
  <li class="page-nav__list--item">Hello World 3</li>
</ul>

不再需要 JS。当然你可以把opacity属性改成你需要的属性。