在 vue 项目中处理按钮点击事件时，若想获取被点击按钮显示的文本（如 innertext 或 textcontent），不应访问 event.target.value（按钮无 value 属性），而应读取 event.target.textcontent 或 event.target.innertext；需注意类型断言安全性和 dom 节点结构。
在 vue 项目中处理按钮点击事件时，若想获取被点击按钮显示的文本（如 innertext 或 textcontent），不应访问 event.target.value（按钮无 value 属性），而应读取 event.target.textcontent 或 event.target.innertext；需注意类型断言安全性和 dom 节点结构。
在 Vue（尤其是组合式 API + TypeScript）中为按钮绑定点击事件并动态读取其显示文本，是常见但易出错的操作。初学者常误用 target.value，导致输出 undefined ——这是因为
✅ 正确做法：使用 textContent 获取按钮文字
以下是一个完整、类型安全的 Vue 3（Composition API + TypeScript）示例：
<template>
<button class="w-32" @click="sendClick">登录</button>
<button class="w-32" @click="sendClick">注册</button>
<button class="w-32" @click="sendClick">忘记密码</button>
</template>
<script setup lang="ts">
const sendClick = (event: MouseEvent) => {
// 安全断言 target 为 HTMLButtonElement
const target = event.target as HTMLElement;
// 推荐：直接读取 textContent（包含所有文本，无视样式隐藏）
const buttonText = target.textContent?.trim() || '';
console.log('点击的按钮文字：', buttonText); // 例如：'登录'
};
</script>? 提示：event.target 类型为 EventTarget，不保证有 textContent，因此需先断言为 HTMLElement（比 HTMLButtonElement 更通用，兼容 等场景）；再通过可选链 ?. 和 trim() 避免空格与 null 安全问题。
⚠️ 常见错误与规避方案
| 错误写法 | 问题说明 | 修正建议 |
|---|---|---|
| (target as HTMLButtonElement).value | ❌ 不要用 value，改用 textContent | |
| target.innerHTML | 可能包含 HTML 标签，存在 XSS 风险且语义不符 | ✅ 优先用 textContent（纯文本、安全、标准） |
| 忽略 event.currentTarget 与 event.target 区别 | 若按钮内含图标或 span，target 可能是子元素而非 button 本身 | ✅ 如需确保获取按钮自身文本，推荐 event.currentTarget.textContent |
✅ 进阶健壮写法（处理嵌套内容）：
立即学习“前端免费学习笔记（深入）”；
const sendClick = (event: MouseEvent) => {
const btn = event.currentTarget as HTMLButtonElement;
// 即使按钮内含 <i>图标</i>文本，也能准确提取纯文本内容
const text = Array.from(btn.childNodes)
.filter(node => node.nodeType === Node.TEXT_NODE)
.map(node => node.textContent?.trim())
.filter(Boolean)
.join(' ');
console.log('按钮纯文本内容：', text);
};? 总结
- 按钮的“显示名称”本质是其 textContent，而非 value；
- 使用 event.currentTarget 比 event.target 更可靠，避免事件冒泡导致子元素被捕获；
- TypeScript 断言需谨慎：优先使用 as HTMLElement 而非过度限定为 HTMLButtonElement，提升组件复用性；
- 生产环境建议配合 v-bind 动态绑定 data-* 属性（如 :data-name="btnLabel"），实现更清晰、可测试的逻辑解耦。
掌握这一基础事件处理模式，将为后续构建可访问、可维护的 Vue 表单与交互组件打下坚实基础。
