用 e.target.tagname 判断点击目标类型可精准区分点击位置：'button'时直接取值，'i'/'span'等时需上溯找按钮，推荐循环查找或 closest('button') 安全获取按钮元素。
直接用 e.target.tagName 判断点击目标类型，就能快速区分是点在按钮本体上，还是点在内部图标、文字等子元素上——这是规避识别错位最轻量、最可靠的方式。
为什么会出现识别错位？
按钮里嵌了 <i></i> 图标或 <span></span> 文字时，用户实际点击的 DOM 节点可能是这些子元素，而非 <button></button> 本身。此时 e.target 指向的是图标或文字节点，e.target.value 为空（图标没有 value），e.target.textContent 又不是按钮文本，导致取值逻辑断裂。
用 tagName 快速分类处理
在事件回调中检查 e.target.tagName，按类型分流处理：
-
'BUTTON'：点击落在按钮空白区域，可直接读
e.target.value或e.target.textContent - 'I'、'SPAN'、'SVG' 等：点击落在图标或包装文字上，需向上找最近的 button 元素
- 其他（如 'TEXT'）：说明点中了纯文本节点，同样要回溯到父 button
推荐写法（兼容性强）
不依赖 closest()（IE 不支持），也不硬编码查找层级，而是用循环安全上溯：
const getButtonFromEvent = (e) => {
let el = e.target;
while (el && el.tagName !== 'BUTTON') {
el = el.parentElement;
}
return el;
};
const handleClick = (e) => {
const btn = getButtonFromEvent(e);
if (!btn) return;
console.log('按钮 ID:', btn.value);
console.log('按钮文本:', btn.textContent.trim());
};
更简洁的替代方案（现代浏览器）
如果项目已放弃 IE，可用 e.target.closest('button') 替代循环，语义更清晰：
-
e.target.closest('button')稳定返回绑定事件的按钮元素（即使点在图标上） - 配合
btn?.value和btn?.textContent，避免空值报错 - 比反复判断
tagName更少代码，但本质仍是“找按钮”，不是“信 target”
