当两个绝对定位的 DOM 元素（非父子关系）发生视觉重叠时，mouseleave 会在鼠标移入上方元素时错误触发；通过为上层元素设置 pointer-events: none，可使其完全不参与鼠标事件捕获，从而让底层元素的 mouseenter/mouseleave 行为保持连续、准确。
当两个绝对定位的 dom 元素（非父子关系）发生视觉重叠时，`mouseleave` 会在鼠标移入上方元素时错误触发；通过为上层元素设置 `pointer-events: none`，可使其完全不参与鼠标事件捕获，从而让底层元素的 `mouseenter`/`mouseleave` 行为保持连续、准确。
在实际开发中，我们常遇到这样一种布局场景：两个
元素使用 position: absolute 叠加在同一容器内，彼此无嵌套关系（即 #smaller 并非 #myDiv 的子元素），但视觉上部分覆盖。此时，尽管鼠标始终停留在父容器可视区域内，#myDiv 的 mouseleave 仍会因鼠标“进入” #smaller 而意外触发——这是因为浏览器将 mouseleave 视为离开当前元素边界，而 #smaller 作为同级元素会中断事件流。
最简洁、标准且兼容性良好的解决方案是：对上层遮盖元素（如 #smaller）应用 CSS 属性 pointer-events: none。该声明使该元素完全忽略所有鼠标交互事件（包括 mouseenter、click、mousemove 等），鼠标事件将直接穿透至其下方的元素（即 #myDiv），从而保证 #myDiv 的 mouseenter/mouseleave 仅在其自身几何边界进出时触发，逻辑完全符合直觉。
✅ 示例代码如下：
#myDiv {
width: 300px;
height: 300px;
background-color: yellow;
position: absolute;
}
#smaller {
border: 1px solid red;
width: 100px;
height: 100px;
position: absolute;
top: 100px;
left: 100px;
pointer-events: none; /* 关键：禁用鼠标事件捕获 */
}
const myDiv = document.getElementById('myDiv');
myDiv.addEventListener('mouseenter', () => {
console.log('Mouse entered the div');
});
myDiv.addEventListener('mouseleave', () => {
console.log('Mouse left the div — now triggered correctly!');
});
⚠️ 注意事项：
- pointer-events: none 不影响元素的渲染、布局或 z-index 层级，仅屏蔽鼠标事件；若需保留 #smaller 的点击等交互，请改用其他方案（如事件委托 + event.composedPath() 判断，但复杂度显著上升）；
- 该属性在 IE11+、Chrome 4+、Firefox 3.6+、Safari 4+ 中均被广泛支持，现代项目中可放心使用；
- 若后续需动态启用/禁用 #smaller 的交互能力，可通过 JS 切换该 CSS 属性：smallerEl.style.pointerEvents = 'none' 或 'auto'。
综上，pointer-events: none 是解决同级重叠元素导致 mouseleave 误触发问题的轻量、可靠、标准化方案，无需引入额外监听逻辑或 DOM 结构变更，推荐作为首选实践。
