本文详解为何 mouseover 事件会误触嵌套子菜单，以及如何通过 event.target === element 精确判断事件源，确保仅在真正悬停顶层 （如“Element 1”“Element 2”）时触发逻辑，彻底规避子菜单（如“Element 2.1”）的干扰。

本文详解为何 `mouseover` 事件会误触嵌套子菜单，以及如何通过 `event.target === element` 精确判断事件源，确保仅在真正悬停顶层 `

`（如“element 1”“element 2”）时触发逻辑，彻底规避子菜单（如“element 2.1”）的干扰。

在构建多级导航菜单时，一个常见误区是：为顶层菜单项绑定 mouseover 事件后，鼠标移入其子菜单（如

Element 2.1

）时，事件仍被意外触发。这并非选择器错误，而是对 DOM 事件机制理解偏差所致。

根本原因在于：mouseover 是非冒泡事件，但它会持续触发于鼠标进入的每一个目标元素。当鼠标从 Element 2 移入其子

再进入 Element 2.1 时，Element 2 的监听器并不会因冒泡而触发；但问题出在——你监听的是整个
• 元素（包含子菜单），而 event.target 实际指向的是当前鼠标所在的最深子节点（例如 Element 2.1 的
• 标签）。因此，若不校验 event.target 是否等于绑定监听器的原始元素，就会产生“误触发”假象。

  你原用的 CSS 选择器 div > ul > li:not(ul) 语法无效：:not() 伪类不接受复合选择器（ul 是标签名，不是伪类或属性），该写法实际被浏览器忽略，等价于 div > ul > li，即选中了所有

  

  Seo Article Agent

  生成符合SEO优化的长篇文章，包含结构化标题和关键词丰富的内容，提升搜索引擎排名和可读性。

  下载
• （含子菜单项）。正确做法是使用 :not(:has(ul))（现代浏览器支持）或更兼容的 > ul > li（利用子组合器限定一级子项）：

  // ✅ 推荐：精确选取无子 ul 的顶层 li（兼容性好）
  const mainElems = document.querySelectorAll('div > ul > li');
  
  // 过滤掉包含子 ul 的项（即排除 Element 2 和 Element 4）
  const topLevelItems = Array.from(mainElems).filter(li => 
    !li.querySelector('ul')
  );
  
  topLevelItems.forEach(element => {
    element.addEventListener('mouseover', (event) => {
      // ? 关键校验：仅当鼠标直接位于该顶层 li 本身时才执行
      if (event.target === element) {
        console.log(element.innerText.trim()); // 输出 "Element 1"、"Element 3"
      }
    });
  });

  ⚠️ 注意事项：

  • 不要依赖 stopPropagation()（如原代码所示）——mouseover 本不冒泡，调用它无效且误导；
  • 避免使用 event.currentTarget 替代 element，因箭头函数中 this 不绑定，而 currentTarget 在此场景恒等于 element，但语义不如显式比较清晰；
  • 若需支持旧版浏览器（如 IE），请改用 li.children.length === 1 && li.firstChild.nodeType === 3 判断是否仅有文本子节点；
  • 如需增强体验，可配合 mouseout 或 mouseleave 处理退出逻辑，但注意 mouseleave 才真正不触发子元素。

  总结：精准控制 mouseover 的核心是双重保障——先用可靠选择器获取目标元素，再通过 event.target === element 做运行时校验。这既符合事件委托的设计哲学，也确保交互逻辑严格遵循 UI 层级结构。