
本文讲解在 angular 模板中使用 `(click)` 事件时,当事件目标(`event.target`)为子元素(如 `
在 Angular 组件中,当你为
✅ 推荐做法:使用 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 层级关系更专业、更可维护的选择。










