textarea 的 select 事件会在用户选中文本时触发，但实际开发中常因按钮或链接点击导致误触发；本文介绍通过检查 document.activeelement 精准判断事件来源，确保仅在 textarea 处于焦点且发生真实文本选择时响应。
textarea 的 select 事件会在用户选中文本时触发，但实际开发中常因按钮或链接点击导致误触发；本文介绍通过检查 document.activeelement 精准判断事件来源，确保仅在 textarea 处于焦点且发生真实文本选择时响应。
select 事件虽专为文本选择设计，但其触发机制并非严格绑定“用户主动选中”动作——只要页面中任意可聚焦元素（如 <button> 或 <a>）被点击，浏览器会将焦点转移至该元素，而此时若此前 textarea 中存在选区，部分浏览器（尤其是 Chromium 内核）会在焦点切换瞬间重新派发 select 事件，造成逻辑误判。
要可靠区分真实选择行为与焦点切换引发的伪触发，核心方案是：在事件处理器中验证当前获得焦点的元素是否为监听目标本身。document.activeElement 提供了实时、权威的焦点归属信息，它是只读属性，返回当前 DOM 中具有焦点的元素节点。
以下为推荐的健壮写法：
const summary = document.getElementById("summary");
summary?.addEventListener("select", (e) => {
// 关键校验：仅当 textarea 本身是 activeElement 时才执行业务逻辑
if (document.activeElement === summary) {
console.log("✅ 文本真实被选中，且 textarea 仍保持焦点");
// 此处可安全执行高亮、复制、统计等依赖选区的操作
const selectedText = summary.value.substring(summary.selectionStart, summary.selectionEnd);
console.log("选中内容：", selectedText);
} else {
console.log("⚠️ 事件由焦点切换触发，忽略处理");
}
});✅ 注意事项
- 优先使用 === 直接比较 DOM 元素引用（document.activeElement === summary），比 id 字符串匹配更安全（避免 ID 冲突或动态修改 ID 的边界情况）；
- 不要依赖 e.target 判断来源——select 事件的 e.target 始终是 textarea，无法反映触发上下文；
- 若应用支持移动端，需注意部分 iOS Safari 对 select 事件的支持有限，建议结合 selectionchange 事件做兼容性兜底；
- 此方案不影响原生交互体验：用户正常选中文本后点击按钮，事件不会误触发；而直接点击按钮（未事先选中文本）则完全不触发 select。
通过这一简单而关键的校验，即可彻底解决外部点击干扰问题，让 select 事件真正回归语义本质——精准响应用户的文本选择意图。
