本文详解为何 mouseover 事件会误触嵌套子菜单，以及如何通过 event.target === element 精确判断事件源，确保仅在真正悬停顶层 <li>（如“Element 1”“Element 2”）时触发逻辑，彻底规避子菜单（如“Element 2.1”）的干扰。
本文详解为何 `mouseover` 事件会误触嵌套子菜单，以及如何通过 `event.target === element` 精确判断事件源，确保仅在真正悬停顶层 `
在构建多级导航菜单时，一个常见误区是：为顶层菜单项绑定 mouseover 事件后，鼠标移入其子菜单（如 <li>Element 2.1</li>）时，事件仍被意外触发。这并非选择器错误，而是对 DOM 事件机制理解偏差所致。
根本原因在于：mouseover 是非冒泡事件，但它会持续触发于鼠标进入的每一个目标元素。当鼠标从 Element 2 移入其子 <ul> 再进入 Element 2.1 时，Element 2 的监听器并不会因冒泡而触发；但问题出在——你监听的是整个 <li> 元素（包含子菜单），而 event.target 实际指向的是当前鼠标所在的最深子节点（例如 Element 2.1 的 <li> 标签）。因此，若不校验 event.target 是否等于绑定监听器的原始元素，就会产生“误触发”假象。
你原用的 CSS 选择器 div > ul > li:not(ul) 语法无效：:not() 伪类不接受复合选择器（ul 是标签名，不是伪类或属性），该写法实际被浏览器忽略，等价于 div > ul > li，即选中了所有 <li>（含子菜单项）。正确做法是使用 :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 层级结构。
