通过内联 onclick 事件调用 JavaScript 代码，可实现在用户点击 时自动选中其全部文本内容，无需额外 class 或外部事件绑定；推荐使用独立函数封装逻辑，兼顾可读性与可维护性。
通过内联 `onclick` 事件调用 javascript 代码，可实现在用户点击 `
` 时自动选中其全部文本内容，无需额外 class 或外部事件绑定；推荐使用独立函数封装逻辑，兼顾可读性与可维护性。
在 Web 开发中，有时需要让用户点击某个容器（如
）后，自动选中该元素内的全部文本内容，便于快速复制。虽然可通过 document.addEventListener 或类选择器批量绑定事件，但若希望“零配置”——即不添加 class、不依赖外部脚本初始化——直接在 HTML 标签内完成，是完全可行的。
✅ 正确实现方式：使用 event.srcElement 定位当前点击元素
核心思路是：在 onclick 中创建一个 Range 对象，调用 range.selectNode() 选中触发事件的 DOM 节点，再将该范围添加到 window.getSelection() 中。注意必须先清空已有选区（removeAllRanges()），否则可能叠加或失效。
✅ 推荐写法：定义全局函数（清晰、可复用、易调试）
<div onclick="selectText(event)">Click me to select all text</div>
<div onclick="selectText(event)">Another selectable div</div>
<script>
function selectText(e) {
const target = e.srcElement || e.target; // 兼容旧版 IE 与现代浏览器
const range = document.createRange();
range.selectNode(target);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
</script>
✅ 优点：逻辑集中、便于统一修改（如增加只读判断）、支持调试、避免重复代码。
⚠️ 不推荐写法：内联匿名自执行函数（虽可行但隐患多）
<div onclick="(function(){const r=document.createRange();r.selectNode(event.srcElement);window.getSelection().removeAllRanges();window.getSelection().addRange(r);})()">Click me</div>
- ❌ 可读性差，难以维护；
- ❌ 无法复用，每个标签需重复粘贴长代码；
- ❌ 错误难定位（无函数名、堆栈信息缺失）；
- ❌ event 在部分旧环境可能未自动注入（应显式传参）；
- ❌ 不符合现代前端工程规范（HTML 与 JS 职责分离）。
? 补充说明与注意事项
- e.srcElement vs e.target：srcElement 是 IE 传统属性，target 是标准属性。为兼容性，建议使用 e.target（现代浏览器均支持），或回退写法：e.target || e.srcElement。
-
仅适用于文本内容可见的块级元素：若 内含 、
