复制链接按钮失效主因是未正确调用 navigator.clipboard.writeText()，需确保 HTTPS/localhost 环境、用户 click 手势触发、同步执行、try/catch 捕获错误，并优先使用 window.location.href 获取当前 URL，配合 data-url 属性和 aria-live 反馈复制状态。
复制链接按钮点击没反应，多半是没调用 navigator.clipboard.writeText()
现代浏览器里复制文本到剪贴板，必须走 navigator.clipboard.writeText() 这个 API，不能靠 document.execCommand()（已废弃）或模拟选中+copy（兼容性差、权限受限）。它要求页面在安全上下文（HTTPS 或 localhost）中运行，且必须由用户手势触发（比如 click 事件），否则会直接报错 "Permission denied"。
常见错误：把复制逻辑写在 onload 或定时器里，或者用 mouseenter 触发——这些都不是有效用户手势，API 会静默失败或抛出拒绝错误。
- 确保按钮绑定的是
click（或touchend）事件，且事件处理器是同步执行的 - 不要在异步回调（如
fetch().then()）里直接调用writeText()，除非你能保证该回调仍处于用户手势的“延续期”（通常不行，得提前存好链接） - 用
try/catch包裹，捕获NotAllowedError（权限被拒）和TypeError（API 不可用）
怎么获取当前页面 URL 并复制？window.location.href 最稳妥
多数场景下，“复制链接”就是复制当前页完整 URL，window.location.href 是最直接、无歧义的选择。别用 document.URL（可能不含 hash 后参数），也别拼接 location.origin + location.pathname（容易漏掉 search 和 hash）。
如果要复制特定内容（比如某篇文章的分享链接），应预先将目标 URL 存为变量或从 data-url 属性读取，避免点击时再动态计算——减少出错点，也规避因路由库（如 React Router）导致的 location 延迟更新问题。
立即学习“前端免费学习笔记（深入）”；
- HTML 按钮加
data-url属性：<button data-url="https://example.com/post/123">复制链接</button> - JS 里优先读取
btn.dataset.url || window.location.href - 注意 URL 编码：如果链接含中文或特殊符号，
writeText()能正确处理，无需手动encodeURI()
复制成功后 UI 怎么反馈？别只靠 alert()
alert() 会打断操作、体验差，而且移动端常被拦截。更合理的方式是临时替换按钮文案（比如变成“已复制！”），再几秒后自动恢复。关键是要有视觉反馈，且不能影响可访问性（比如屏幕阅读器需感知状态变化）。
- 用
aria-live="polite"区域播报状态，配合textContent更新按钮文字 - 加 CSS 过渡让文案切换柔和些，例如
transition: opacity 0.2s - 务必在恢复原始文案前清除定时器，避免多个点击导致多次覆盖或残留
- 别用
disabled状态禁用按钮——这会让键盘用户无法再次操作，且对屏幕阅读器不友好
旧浏览器（IE / Safari
navigator.clipboard 在 Safari 13.1+、Chrome 66+、Firefox 63+ 才支持。IE 完全不支持，老版 Safari 只能靠 document.execCommand('copy') 配合 <textarea> 模拟。但这个方案现在仅作兜底，代码必须隔离，不能污染主线逻辑。
- 先检测
'clipboard' in navigator，真则走新 API；假则插入一个隐藏<textarea>，设值、选中、执行document.execCommand('copy') -
<textarea>必须position: fixed; left: -9999px;，不能用display: none或visibility: hidden（会导致选中失败） - 老方案执行完记得移除
<textarea>，避免 DOM 泄漏 - 不用 polyfill 库——体积大、维护成本高，简单场景手写 20 行足够
setTimeout 清除前一个），要么用 Promise 链式锁住操作，否则 UI 会错乱。 
