textarea 的 select 事件会在用户选中文本后触发，但当页面中其他元素（如按钮、链接）被点击时，该事件也可能被错误触发；可通过检查 document.activeElement 是否为当前 textarea 来精准过滤无效触发。
textarea 的 `select` 事件会在用户选中文本后触发，但当页面中其他元素（如按钮、链接）被点击时，该事件也可能被错误触发；可通过检查 `document.activeelement` 是否为当前 textarea 来精准过滤无效触发。
在 Web 开发中，select 事件常用于监听用户在 <input> 或 <textarea> 中的文本选择行为。然而，一个常见却容易被忽视的问题是：即使用户并未主动操作 textarea，仅点击页面中的按钮或链接，也可能意外触发其 select 事件。这是因为浏览器在焦点切换过程中（例如从 textarea 切换到 button），会隐式重置并重新触发 select 事件——尤其在 textarea 曾有文本被选中的前提下。
根本原因在于：select 事件的触发逻辑与 DOM 焦点状态强相关，而非严格绑定于“用户正在选择”的动作。当 textarea 处于聚焦且有选中文本的状态时，任何导致焦点离开它的交互（如点击按钮），都可能触发一次“残留”的 select 事件。
✅ 正确的解决方案是：在事件处理器中验证当前获得焦点的元素是否确实是目标 textarea。利用 document.activeElement 可以准确获取当前聚焦元素，从而排除误触发：
const summary = document.getElementById("summary");
summary?.addEventListener("select", (e) => {
// 仅当 textarea 本身是当前 active 元素时才执行业务逻辑
if (document.activeElement === summary) {
console.log("✅ 文本真正被选中且 textarea 仍处于焦点状态");
// 此处可安全执行高亮、统计、复制等操作
}
});⚠️ 注意事项：
- 不要依赖 e.target 或 e.currentTarget 判断来源——它们始终指向 textarea，无法区分真实选择行为与焦点切换副作用；
- 避免仅比对 id 字符串（如 activeElement.id === 'summary'），应直接比较 DOM 节点引用（=== summary），确保类型安全与性能；
- 若 textarea 支持动态创建或销毁，建议在事件监听前增加存在性校验，并考虑使用事件委托（但 select 事件不冒泡，故需直接绑定）；
- 在 Safari 等部分浏览器中，select 事件行为略有差异，此方案具备良好兼容性（Chrome/Firefox/Safari/Edge 均验证通过）。
通过这一轻量级校验，即可确保 select 事件真正反映用户意图，提升交互逻辑的健壮性与可维护性。
