当两个绝对定位的同级元素存在视觉重叠时，mouseleave 会在鼠标移入上方元素时错误触发；通过为遮挡元素设置 pointer-events: none，可使其完全不参与鼠标事件捕获，从而保持父级 mouseenter/mouseleave 的语义完整性。
当两个绝对定位的同级元素存在视觉重叠时，`mouseleave` 会在鼠标移入上方元素时错误触发；通过为遮挡元素设置 `pointer-events: none`，可使其完全不参与鼠标事件捕获，从而保持父级 `mouseenter`/`mouseleave` 的语义完整性。
在实际开发中，常遇到这样的布局场景：两个
元素处于 DOM 同一层级（即无嵌套关系），但因使用 position: absolute 而在视觉上发生重叠。此时，尽管 #smaller 并非 #myDiv 的子元素，鼠标从 #myDiv 移动到 #smaller 区域时，浏览器仍会触发 #myDiv 的 mouseleave 事件——这是因为鼠标离开了 #myDiv 的绘制区域边界，而 #smaller 又未被排除在事件流之外。
最简洁、兼容性好且无需额外 JavaScript 逻辑的解决方案是：为遮挡层（即 #smaller）添加 CSS 属性 pointer-events: none。
该属性使元素完全不响应任何鼠标事件（包括 mouseover、click、mouseleave 等），其下层元素（如 #myDiv）将直接接收全部鼠标交互，事件冒泡与边界判断均按视觉底层元素的几何范围进行。
✅ 正确实现示例：
#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 — only triggered when truly exiting');
});
⚠️ 注意事项：
- pointer-events: none 仅影响鼠标事件，不影响 DOM 结构、渲染、CSS 动画或 transform 等视觉表现；
- 若 #smaller 需要保留点击/悬停等交互功能，则此方案不适用，需改用事件委托 + relatedTarget 判断（例如检查 mouseleave 的 relatedTarget 是否为 #smaller 或其后代），但复杂度显著上升；
- 所有现代浏览器（Chrome 4+、Firefox 3.6+、Safari 5.1+、Edge 12+）均支持 pointer-events，IE10+ 也支持（IE9 及更早版本不支持，若需兼容需降级处理）；
- 此方案不改变 HTML 结构，完全满足“两元素同级”的前提约束，且零 JS 运行时开销，性能最优。
综上，pointer-events: none 是解决同级元素遮挡引发 mouseleave 误触发问题的首选方案——简单、可靠、声明式，且完美契合纯 CSS 控制事件行为的设计哲学。
