您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計綜合問答

JS mouseout 事件在父子元素間觸發異常的解決方案

編輯：程式設計綜合問答

問題現象

在導航菜單開發中，將 `onmouseout` 綁定在父容器 `

` 上，期望滑鼠離開整個導航區域時隱藏子菜單。但實際操作中，滑鼠從父元素移入子元素（`

根本原因

`mouseout` 事件會在滑鼠離開「當前元素」時觸發，包含移入子元素。因為瀏覽器認為滑鼠已離開父元素範圍。這與 `mouseleave` 不同，後者不冒泡，僅在真正離開元素邊界時觸發。

解決方案：防抖延遲隱藏

利用 `setTimeout` 延遲執行隱藏邏輯，並在 `mouseover` 時清除定時器。

核心代碼模式

let hideTimer = null;

function hideSubMenu() {
  // 隱藏所有子菜單邏輯
  subMenuItems.forEach(item => item.style.display = 'none');
}

function scheduleHide() {
  hideTimer = setTimeout(hideSubMenu, 300); // 300ms 延遲
}

function cancelHide() {
  if (hideTimer) clearTimeout(hideTimer);
}

// 綁定事件
navElement.onmouseout = scheduleHide;
navElement.onmouseover = cancelHide;
// 子菜單同樣綁定
subMenuElement.onmouseout = scheduleHide;
subMenuElement.onmouseover = cancelHide;

更優雅的現代寫法

使用 `mouseleave` / `mouseenter` 替代 `mouseout` / `mouseover`，避免冒泡干擾。
CSS `:hover` 配合鄰接選擇器實現純 CSS 下拉菜單，零 JS 依賴。
若需複雜交互，採用事件委託 + `relatedTarget` 判斷滑鼠去向。

完整示例結構

<nav id="nav">
  <ul id="A"><li>菜單1</li><li>菜單2</li></ul>
  <ul id="B" class="sub-menu"><li>子項1</li><li>子項2</li></ul>
</nav>

<style>
  #nav { position: relative; }
  .sub-menu { display: none; position: absolute; top: 100%; left: 0; }
  #nav:hover .sub-menu { display: block; } /* 純 CSS 方案 */
</style>

掌握事件冒泡機制與防抖技巧，能輕松應對各類下拉、懸浮交互場景。