事件侦听器 - 鼠标离开 - 下拉菜单

Question

试图弄清楚当鼠标离开下拉菜单中的所有元素时如何使用mouseleave事件。 它目前仅在鼠标离开子菜单时有效，但不适用于"关于"元素以及子菜单元素。 让我发疯，并试图弄清楚几个小时。

<ul class="navigation__list-menu">
<li class="navigation__list-menu-about">
<a href="/about" class="now">About</a>
</li>
<ul id="nav" class="navigation__list-menu-about-options now">
<li><a href="/bio">my bio</a></li>
<li><a href="/cv">curriculum vitae</a></li>
</ul>
<script>
const navOptions = document.querySelector(".navigation__list-menu-about");
const navOptionMenu = document.querySelector(
".navigation__list-menu-about-options"
);

navOptions.addEventListener("mouseenter", (e) => {
navOptionMenu.classList.add("active");
});
navOptions.addEventListener("mouseleave", (e) => {
navOptionMenu.classList.remove("active");
});
</script>

Answer 1

实际上你只是在操作子项目。您还需要在关于项中添加/删除类。请看下面的代码片段

const navOptions = document.querySelector(".navigation__list-menu-about");
const navOptionMenu = document.querySelector(
".navigation__list-menu-about-options"
);

navOptions.addEventListener("mouseenter", (e) => {
navOptions.classList.add("active");
});
navOptions.addEventListener("mouseleave", (e) => {
navOptions.classList.remove("active");
});
navOptionMenu.addEventListener("mouseenter", (e) => {
navOptionMenu.classList.add("active");
});
navOptionMenu.addEventListener("mouseleave", (e) => {
navOptionMenu.classList.remove("active");
});

<style>
.active,
.active a {
color: red;
}
</style>
<ul class="navigation__list-menu">
<li class="navigation__list-menu-about">
<a href="/about" class="now">About</a>
</li>
<ul id="nav" class="navigation__list-menu-about-options now">
<li><a href="/bio">my bio</a></li>
<li><a href="/cv">curriculum vitae</a></li>
</ul>
</ul>

Answer 2

事件冒泡将始终将事件从子标签传递到父标签，除非有 JavaScript 代码中止它。

这意味着通过收听父navigation__list-menu您也可以从其子级获得所有事件。 根据event.target，您可以了解事件的来源。

如果您无法在父级获取事件，则可能存在：

• 从子节点event.stopPropogation()的一些代码。
• 您的 HTML 代码存在结构问题