应使用 event.stoppropagation() 阻止图标点击事件冒泡至按钮，或通过 event.target 判断点击源统一处理；慎用 event.stopimmediatepropagation()，因其会阻止同一元素上后续同类型监听器执行。
按钮内图标点击触发事件冒泡时，常见问题是：点击图标本意只执行图标相关逻辑，但按钮的 click 事件也被触发了。解决核心是阻止事件向上传播，同时不干扰正常交互逻辑。
用 event.stopPropagation() 阻断冒泡
在图标元素的事件监听器中调用该方法，可让事件停在图标这一层，不再向上触发按钮的 click：
- 适用于图标和按钮有完全独立行为的场景（比如图标是删除，按钮是提交）
- 注意：它只阻止冒泡，不影响同一元素上其他事件监听器执行
- 示例：icon.addEventListener('click', e => { e.stopPropagation(); doIconAction(); });
用 event.target 区分点击源再分支处理
不在图标上单独绑事件，而是在按钮统一监听 click，通过 event.target 判断用户实际点的是按钮文字还是图标：
- 适合图标与按钮功能有关联（如图标是展开箭头，按钮整体控制折叠）
- 避免重复绑定，结构更清晰
- 示例：button.addEventListener('click', e => { if (e.target === icon) { handleIconClick(); } else { handleSubmit(); } });
慎用 event.stopImmediatePropagation()
它比 stopPropagation 更强，会阻止**当前元素上后续所有同类型监听器**执行：
- 仅在明确需要屏蔽同一元素其他监听器时使用（比如防止重复提交）
- 日常图标/按钮场景中一般不需要，容易误伤其他逻辑
- 多数情况下，stopPropagation 已足够
补充：CSS 层级不影响事件流，但影响 event.target
即使图标用 position: absolute 叠在按钮上，只要它是按钮的子元素，点击它仍会先触发图标事件（如果绑了），再冒泡到按钮。所以关键不是布局，而是事件绑定位置和传播控制。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
