在 angular 中处理按钮点击事件时，若事件目标（event.target）是子元素（如 `
在使用 Angular Material 的 mat-icon-button 时，HTML 渲染后实际的点击事件目标（event.target）往往不是 <button> 元素本身，而是其内部的 <mat-icon> —— 这是因为图标才是用户实际点击的视觉区域。此时若直接访问 event.target，会得到 <mat-icon> 实例，而非你期望的外层按钮。
要准确获取包裹图标的父 <button> 元素，推荐使用以下方式：
download(event: MouseEvent) {
const parentButton = event.target instanceof Node
? event.target.parentNode
: null;
if (parentButton && parentButton instanceof HTMLElement && parentButton.tagName === 'BUTTON') {
console.log('Found parent button:', parentButton);
// ✅ 安全执行后续逻辑，例如添加 loading 状态、禁用按钮等
} else {
console.warn('Parent is not a BUTTON element');
}
}⚠️ 注意事项：
- event.target.parentNode 返回的是直接父节点（Node 类型），需校验是否为 <button> 元素，避免因 DOM 结构变化导致意外行为；
- 更健壮的做法是结合类型守卫（如 instanceof HTMLElement）和标签名判断，防止 parentNode 为 null 或非预期元素；
- 若未来组件结构升级（例如按钮内嵌多层容器），可改用 event.currentTarget（始终指向绑定事件的元素，即 <button>），这是更语义化、更可靠的选择：
download(event: MouseEvent) {
// ✅ 推荐：event.currentTarget 始终等于绑定 (click) 的 button 元素
const button = event.currentTarget as HTMLButtonElement;
console.log('Bound button:', button);
}✅ 总结：优先使用 event.currentTarget 获取事件绑定的目标元素（即 <button>），它不依赖 DOM 层级，语义清晰且抗重构；仅在需动态向上查找特定祖先时，才谨慎使用 parentNode 配合类型与存在性校验。
