当两个绝对定位的 DOM 元素在视觉上重叠但处于同级关系时，鼠标移入上方子元素会意外触发底层元素的 mouseleave。本文提供一个简洁可靠的 CSS+JS 方案：对遮挡层设置 pointer-events: none，使其不参与事件捕获，从而保持底层元素的鼠标悬停逻辑完整。
当两个绝对定位的 dom 元素在视觉上重叠但处于同级关系时，鼠标移入上方子元素会意外触发底层元素的 `mouseleave`。本文提供一个简洁可靠的 css+js 方案：对遮挡层设置 `pointer-events: none`，使其不参与事件捕获，从而保持底层元素的鼠标悬停逻辑完整。
在实际开发中，常遇到这样一种布局场景：两个
元素（如 #myDiv 和 #smaller）同为父容器的子节点，彼此无嵌套关系，但通过 position: absolute 实现视觉上的层叠。此时，尽管 #smaller 在 #myDiv 上方显示，浏览器仍会将其视为独立的事件目标——当鼠标从 #myDiv 移入 #smaller 区域时，#myDiv 会收到 mouseleave 事件（因焦点离开其边界），即使视觉上用户“仍在原区域内部”。
这个问题无法通过更换事件类型（如改用 mouseover/mouseout）彻底解决，因为它们同样受事件冒泡与目标穿透影响，且更易产生重复触发。而将 #smaller 改为 #myDiv 的子元素虽能自然继承事件流逻辑，却违背了题设中“必须保持同级结构”的约束。
✅ 推荐解法：pointer-events: none
该 CSS 属性可让元素完全忽略鼠标交互，既不捕获也不阻挡事件，相当于在事件传递链中“隐形”。它不影响布局、渲染或 DOM 结构，完美契合本例需求：
#smaller {
border: 1px solid red;
width: 100px;
height: 100px;
position: absolute;
top: 100px;
left: 100px;
pointer-events: none; /* 关键：使遮挡层不干扰底层事件 */
}
配合原有 JavaScript 逻辑，无需任何修改即可正常工作：
const myDiv = document.getElementById('myDiv');
myDiv.addEventListener('mouseenter', () => {
console.log('Mouse entered the div');
});
myDiv.addEventListener('mouseleave', () => {
console.log('Now this only fires when truly leaving the div area');
});
⚠️ 注意事项：
- pointer-events: none 会使 #smaller 无法响应任何鼠标事件（如 click、hover 等）。若该元素需保留交互能力（例如点击按钮），则此方案不适用，应考虑重构 DOM 层级或使用 document.elementFromPoint() + 坐标检测等 JS 方案；
- 该属性在 IE11 及以上和所有现代浏览器中均被良好支持，移动端也完全兼容；
- 若需动态启用/禁用遮挡层交互，可通过 JS 切换 style.pointerEvents 或切换 CSS 类控制。
总结：在同级重叠元素场景下，pointer-events: none 是语义清晰、性能优异、代码零侵入的首选方案——它不改变结构、不增加复杂度，仅用一行 CSS 就精准隔离事件干扰，是前端布局与交互协同的经典实践。
