textarea 的 select 事件会在用户选中文本后触发，但点击页面其他元素（如按钮或链接）时也可能意外触发该事件；本文介绍通过 document.activeElement 精准校验事件来源，确保仅在真正由 textarea 触发时执行逻辑。
textarea 的 `select` 事件会在用户选中文本后触发，但点击页面其他元素（如按钮或链接）时也可能意外触发该事件；本文介绍通过 `document.activeelement` 精准校验事件来源，确保仅在真正由 textarea 触发时执行逻辑。
select 事件是一个冒泡型 UI 事件，其触发条件是“当前文档中任意可编辑元素的文本选区发生变化”，而非严格限定于绑定元素自身获得焦点后才触发。因此，当用户在 <textarea> 中选中文本，随后点击按钮或链接时，焦点会从 textarea 移出——此时浏览器内部可能重新评估选区状态，并再次派发 select 事件，导致监听器被误执行。
为解决这一问题，核心思路是：在事件回调中验证当前获得焦点的元素是否确实是目标 textarea。document.activeElement 是最直接、可靠的判断依据，它始终返回当前拥有焦点的 DOM 元素（若无则返回 <body> 或 <html>）。
以下为推荐的健壮实现方式：
const summary = document.getElementById("summary");
summary?.addEventListener("select", (e) => {
// ✅ 关键校验：仅当 textarea 仍为活动元素时才处理
if (document.activeElement === summary) {
console.log("✅ 文本选区变更且焦点仍在 textarea 中");
// 此处可安全执行获取 selectionStart/selectionEnd、高亮分析等逻辑
console.log("选中文本：", summary.value.substring(
summary.selectionStart,
summary.selectionEnd
));
}
// ❌ 若 activeElement 是 button/a 等，则忽略（避免误触发）
});⚠️ 注意事项：
- 不要依赖 e.target 或 e.currentTarget 判断来源：select 事件的目标始终是绑定元素（即 summary），无法区分真实触发上下文；
- 避免使用 id 字符串比较（如 activeElement.id === 'summary'）：虽在简单场景可行，但存在 ID 冲突风险且不够语义化；直接使用 === 引用比对更安全、高效；
- 兼容性无忧：document.activeElement 和 select 事件均被所有现代浏览器（Chrome、Firefox、Safari、Edge）及 IE9+ 完全支持；
- 移动端需额外注意：iOS Safari 在软键盘收起时可能触发焦点切换，建议结合 blur/focus 事件做兜底逻辑（如清空临时选区缓存）。
总结而言，select 事件的本质是“选区变更通知”，而非“焦点内操作通知”。通过 document.activeElement 进行运行时焦点校验，是以最小侵入代价实现精准响应的最佳实践。该方案简洁、可靠，适用于任何需要响应用户文本选择行为的富文本交互场景。
