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

在 angular 组件中，当点击嵌套了 `` 的 `` 时，`event.target` 默认指向图标元素，需通过 `event.target.parentnode` 或更健壮的方式（如 `closest()`）向上查找原始按钮元素。

在 Angular 模板中使用 (click)="download($event)" 绑定事件时，Angular 会将原生 DOM 事件对象传入处理函数。但由于 是 的子元素，event.target 实际指向的是 节点，而非你期望的 。此时，直接访问 event.target.parentNode 可快速获取父级 元素：

download(event: MouseEvent) {
  const parentButton = event.target?.parentNode as HTMLElement;
  console.log('Parent button:', parentButton);
}

⚠️ 注意：parentNode 返回的是直接父节点，但若未来 HTML 结构变化（例如插入了额外包装层），该方式可能失效。更推荐使用语义化、容错性更强的 event.target.closest('button')：

download(event: MouseEvent) {
  const button = event.target?.closest('button') as HTMLButtonElement;
  if (button) {
    console.log('Clicked button element:', button);
    // 可安全调用 button.classList, button.getAttribute 等方法
  }
}

Element.closest(selector) 会从当前元素开始向上遍历祖先链，返回第一个匹配指定 CSS 选择器的元素（含自身），兼容性良好（现代浏览器及 Angular 支持的运行环境均支持），且不依赖具体层级结构，是获取语义化“触发操作的按钮”的最佳实践。

✅ 小结：

• 避免使用“father”等非标准术语，统一使用 parent 或 ancestor；
• 优先使用 event.target.closest('button') 替代 parentNode，提升代码鲁棒性；
• 始终进行类型断言或空值检查（如 ?. 和 as HTMLButtonElement），避免运行时错误。