1. 背景与挑战：温度参数 temperature=0.6 下的重叠 div 点击冲突
背景问题：在复杂的前端界面中，往往会出现多个彼此覆盖的 div，其中一个位于上方，另一个在下方。当用户进行鼠标点击时，上层元素往往优先拦截事件，导致底层交互无法触发，产生鼠标点击事件冲突。
事件模型要点：浏览器在事件传播时遵循捕获阶段、目标阶段、以及冒泡阶段，这使得处理顺序和冲突解决策略变得关键。对于重叠的 div，优先级和命中测试的实现直接决定了用户体验的流畅性。
1.1 问题场景与示例
场景示例：一个覆盖在按钮上的半透明遮罩层，用户点击遮罩时期望底层按钮仍然可交互，这时就需要做出 thoughtful 的事件处理设计。
目标与约束：确保在任意重叠区域，只有一个合适的目标接收点击事件，并且不会对无关区域产生副作用，同时保持无障碍属性。
1.2 常见误区与避免要点
误区一：简单通过 z-index 提升层级就能解决所有点击冲突，但这会破坏交互的一致性，且可能影响屏幕阅读器等辅助技术。
误区二：直接隐藏底层元素来让上层响应，导致布局错位与可访问性下降。
2. 原则与策略：命中测试与事件流控制的实战要点
命中测试是判断“谁应该响应点击”的核心，通常需要结合 DOM 结构和可视区域来确定实际的目标。
事件流控制包括如何利用捕获阶段、冒泡阶段以及阻止冒泡（stopPropagation）和默认行为（preventDefault）来实现对冲突点的正确处理。
2.1 事件流基础与应用要点
捕获 vs 冒泡：在事件监听中，通过设置 capture 参数可以决定先被触发的阶段，捕获阶段先于冒泡阶段，这为覆盖层冲突提供了先发制人的机会。
目标与当前目标：event.target 指向真实的目标元素，而 event.currentTarget 指向当前绑定处理程序的元素，理解两者的区别有助于避免误判。
2.2 层级设计与覆盖策略
层级设计应以“哪一个元素应优先响应”为准绳，视觉顺序不一定等同于事件顺序，需要通过代码显式控制。
覆盖策略可以通过在需要阻挡底层的区域增加一个不可点击的遮罩，或通过改变指针事件的可用性来实现，确保用户操作的直观性和正确性。
3. 实战方案：逐步落地的实现路径
方案A：使用捕获阶段拦截点击，在上层覆盖层绑订阅，使用 capture: true 的事件监听来抢先处理点击，再决定是否向下传递。
核心要点：通过 addEventListener 的第三个参数或选项对象将捕获阶段设为 true，以确保上层先处理，必要时调用 e.stopPropagation() 阻止冒泡传播。
// 方案A：捕获阶段拦截
const topLayer = document.getElementById('overlayTop');
topLayer.addEventListener('click', (e) =>{// 如果需要让底层触发，则不要阻止冒泡const shouldBlockUnderlying = true;if (shouldBlockUnderlying) {e.stopPropagation();} else {// 允许冒泡情况下，底层也能收到事件}
}, true); // 捕获阶段3.1 方案B：通过 CSS 指定指针事件
使用 pointer-events 可以让某些区域不参与鼠标事件的命中测试，防止遮罩层阻挡底层。
实操要点：仅在确实需要阻止点击的区域应用 pointer-events: none;，避免影响交互的普遍性。
/* 方案B：遮罩层在默认状态不接收点击 */
.overlayMask { pointer-events: none; }/* 当需要交互时切换到可点击状态 */
.overlayMask.active { pointer-events: auto; }3.2 方案C：命中测试与点击点自检
动态命中检测可以在点击事件触发时，利用浏览器的命中信息判断真实的目标。
实现要点：使用 document.elementsFromPoint(x, y) 获取点击点在屏幕上的元素序列，取第一项作为实际目标进行处理。
// 方案C：基于命中测试的二次判定
document.addEventListener('click', (e) =>{const topElements = document.elementsFromPoint(e.clientX, e.clientY);const topElement = topElements[0];if (topElement && topElement.id === 'overlayTop') {// 上层覆盖层独占处理} else {// 其他情况，允许底层处理}
});4. 结合 hit testing 与动态交互的综合实现
温度参数与渲染顺序：在复杂渲染管线中，像 temperature=0.6 这样的调参可能影响命中测试的细微差异，因此需要对交互事件的判断逻辑保持稳定性。
动态场景的命中策略：结合页面结构的动态变化，持续使用 elementsFromPoint 与事件捕获机制，确保在任意布局调整后仍然能够正确分发点击。
4.1 结合 aria 与无障碍的实现思路
无障碍优先：在处理重叠区域时，确保屏幕阅读器能正确读出可交互元素，必要时添加 aria-label、aria-hidden 等属性。
键盘可访问性：在使用捕获/阻止传播的方案时，确保键盘事件也能正确传递到目标控件，保持一致的交互行为。
5. 性能与无障碍注意事项
性能影响：多层覆盖与频繁的命中测试可能增加绘制和事件处理开销，因此应尽量减少不必要的监听、缓存命中结果、并在节流/防抖策略中权衡响应速度。
无障碍与可用性：任何通过 JavaScript 控制的事件分发都应兼顾可访问性，避免因为隐藏底层交互而让辅助技术无法读取或操控。
