jQuery mouseover 與 mouseenter 核心區別：事件冒泡與子元素觸發機制詳解

一句話總結

mouseenter 不冒泡，僅在綁定元素進入時觸發一次；mouseover 冒泡，滑入子元素也會在父元素上再次觸發。

代碼演示

<div id="outer" style="width:300px;height:300px;background:green;">
  <div id="inner" style="width:100px;height:100px;background:red;"></div>
</div>
<div id="log"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$('#outer').mouseenter(function(){ $('#log').append('enter<br/>'); })
         .mouseover(function(){ $('#log').append('over<br/>'); });
</script>

行為對比

底層原理

• mouseenter/mouseleave：jQuery 封裝，基於 IE 專有 onmouseenter/onmouseleave 實現，**不冒泡**，通過事件代理模擬。
• mouseover/mouseout：原生 DOM 事件，**冒泡**，event.relatedTarget 可判斷來源/目標元素。

選型建議

• 需精確進出一次（如下拉菜單展開/收起）→ mouseenter/leave。
• 需追蹤鼠標在容器內任意移動（如熱區統計、拖拽預覽）→ mouseover/out 配合 event.relatedTarget 過濾。
• 現代項目優先考慮 CSS :hover 或 IntersectionObserver 替代 JS 事件。

總結

理解冒泡與否是關鍵。mouseenter 適合「進入區域」語義，mouseover 適合「掠過元素」語義，混用極易產生重複觸發 Bug。