HTML禁止button嵌套，解析阶段即报错或忽略内层button；应改用div/span加role="button"和tabindex="0"实现视觉嵌套，并用stopPropagation()阻止冒泡，或采用CSS绝对定位使多个button重叠独立响应。
什么是 nested 按钮事件冒泡的典型问题
当你把多个 <button> 嵌套写（比如外层 <button> 里再放一个 <button>），浏览器会直接报错或忽略内层按钮——HTML 规范明确禁止 <button> 作为其他 <button> 的子元素。这不是 JS 控制能绕过的，是解析阶段就被拒的结构。
用 <div> 或 <span> 替代内层 <button> 才能真正嵌套
想实现视觉上的“按钮套按钮”，必须用非交互语义元素承载内层触发区，再靠 JS 绑定行为。否则连 DOM 都构不成嵌套树。
- 外层用
<button>（保持可访问性、原生 focus/enter 支持） - 内层改用
<div role="button" tabindex="0">或<span class="inner-action"> - 务必手动加
tabindex="0"和role="button"，否则键盘用户无法触达 - 避免用
<a href="#">——它会触发页面跳转，且语义不符
用 event.stopPropagation() 阻断冒泡但别滥用
内层点击不该触发外层逻辑时，必须在内层 handler 里调用 event.stopPropagation()；但要注意：它会同时阻止所有父级监听器，包括可能存在的表单提交拦截、全局日志等。
outerBtn.addEventListener('click', () => console.log('outer'));
innerDiv.addEventListener('click', (e) => {
e.stopPropagation(); // 关键：只停在这层
console.log('inner');
});
- 如果外层需要响应部分事件（比如右键、空格键），不要无差别 stop —— 改用
e.target === e.currentTarget判断触发源 -
stopPropagation()不影响捕获阶段，如需彻底隔离，得在捕获阶段监听并e.stopImmediatePropagation() - React/Vue 等框架中，
@click.stop是语法糖，底层仍是调用stopPropagation()
真正的多层叠加推荐用 CSS 定位 + 单层 DOM
视觉上重叠、逻辑上独立的“多层按钮”，更健壮的做法是放弃 DOM 嵌套，改用绝对定位让多个 <button> 叠在一起，各自独立绑定事件。
立即学习“前端免费学习笔记（深入）”；
- 外层容器设
position: relative，各按钮设position: absolute并用top/left/z-index控制层级 - 每个按钮保持语义正确、可聚焦、可键盘操作
- 避免 z-index 过大导致可访问性问题（屏幕阅读器仍按 DOM 顺序读，不是渲染顺序）
- 移动端注意 touch 事件穿透：iOS Safari 对重叠元素的点击判定较严格，建议加
pointer-events: none到遮罩层（如果真需要）
DOM 结构扁平、语义清晰、无障碍支持好，比硬套 nested 冒泡控制更可靠。冒泡控制只是补救手段，不是设计起点。
