如何在 Angular 中通过按钮点击事件获取父级按钮元素

本文讲解在 angular 模板中使用 `(click)` 事件时，当事件目标（`event.target`）为子元素（如 ``），如何准确获取其父级 `` 元素，并提供安全、健壮的实现方式。

在 Angular 组件中，当你为 绑定 (click)="download($event)" 时，实际触发事件的 event.target 往往是内部的 （因为图标才是用户真正点击的视觉区域），而非 本身。此时 event.target.parentNode 确实可获取直接父节点，但直接依赖 parentNode 存在风险：若 Angular 内部渲染结构未来变更（例如插入注释节点、包装容器或动态 DOM 节点），parentNode 可能返回非预期元素（如 #text 节点或 包裹层）。

✅ 推荐做法：使用 event.currentTarget —— 它始终指向事件监听器所绑定的元素，即你声明 (click) 的 本身：

download(event: MouseEvent) {
  // ✅ 安全可靠：currentTarget 就是绑定 click 的 button 元素
  const button = event.currentTarget as HTMLButtonElement;
  console.log('Clicked button:', button);

  // 可进一步操作，例如获取自定义属性
  // const id = button.getAttribute('data-id');
}

⚠️ 注意事项：

• 不要使用 event.target.parentNode 或 event.target.parentElement 作为通用解法，因其依赖 DOM 结构稳定性；
• event.currentTarget 是原生 DOM 事件的标准属性，在 Angular 中完全可用，无需额外导入；
• 若需兼容更复杂的嵌套场景（如按钮内含多层子元素），可结合 closest() 方法向上查找最近的 ：

  const button = event.target instanceof Element 
    ? event.target.closest('button') 
    : null;
  if (button) { /* 安全使用 */ }

? 总结：在事件处理函数中，优先使用 event.currentTarget 获取绑定事件的目标元素；它语义清晰、行为稳定，是比依赖 DOM 层级关系更专业、更可维护的选择。