navigator.clipboard.writeText() 需在用户手势（如click）触发的上下文中调用，否则报NotAllowedError；应通过button.closest('pre').querySelector('code').innerText.trim()提取纯净代码文本，并用textContent切换按钮状态实现轻量反馈。
直接用 Clipboard API + button 就能实现，不需要第三方库，现代浏览器（Chrome 66+、Firefox 63+、Edge 79+）都支持，但要注意权限和 DOM 交互时机。
为什么 navigator.clipboard.writeText() 会报错？
常见错误是 NotAllowedError: Write permission denied 或直接抛出拒绝异常。根本原因是：该 API 只允许在用户手势触发的上下文中执行（比如 click、keydown），不能在 setTimeout、fetch 回调或页面加载完成时自动调用。
- 必须绑定在用户可点击的
button或span上，且事件监听器要直接响应click - 不能写成
button.addEventListener('click', () => setTimeout(() => navigator.clipboard.writeText(...), 0))—— 延迟后就脱离了“用户手势”上下文 - 确保目标元素已渲染完成，别在
document.write或未挂载的模板里提前绑定
怎么从 pre > code 里准确提取纯文本？
很多 HTML 代码块用了 prism.js 或 highlight.js，里面混着 span、class 和换行符，直接取 textContent 会带空格缩进错乱甚至控制字符。得做清洗。
- 推荐用
element.querySelector('code').innerText—— 它会忽略样式标签，保留合理换行和缩进 - 如果需要更干净（比如去掉首尾空行），再加一层
.trim() - 避免用
innerHTML，它会把 HTML 标签当字符串复制，用户粘贴出来就是一堆<span class="token"> - 示例：
const codeEl = button.closest('pre').querySelector('code'); const text = codeEl.innerText.trim();
按钮状态反馈怎么做才不干扰阅读？
复制成功后立刻变文字（如“已复制”）比弹 alert 或全局 toast 更轻量，但容易被忽略或误点多次。关键在视觉节奏和恢复逻辑。
立即学习“前端免费学习笔记（深入）”；
- 点击后立即将按钮
textContent改为“已复制”，同时加disabled属性防连点 - 2 秒后自动切回“复制”并移除
disabled—— 用setTimeout即可，这个延迟不触发权限问题 - 不要用 CSS 动画隐藏/显示按钮，会打断可访问性（屏幕阅读器可能读不到变化）
- 可选：给按钮加个简短
title="复制代码"，鼠标悬停可见
最易被忽略的是 button 和对应 code 块的 DOM 关系——别硬编码选择器，用 closest() 和 querySelector() 向上/向下找，否则一个页面多个代码块时会全部复制同一个内容。
