本文讲解如何通过参数化函数为多个“复制到剪贴板”按钮分配各自独立的文本内容，避免所有按钮触发同一段重复逻辑导致内容覆盖的问题。
本文讲解如何通过参数化函数为多个“复制到剪贴板”按钮分配各自独立的文本内容，避免所有按钮触发同一段重复逻辑导致内容覆盖的问题。
在实际开发中，常需为页面中多个按钮分别绑定不同的复制行为（例如复制不同 ID、链接或验证码）。但若像原始代码那样，在单一 copyText() 函数中硬编码调用两次 navigator.clipboard.writeText()，不仅逻辑错误（后一次调用会覆盖前一次），更无法区分点击的是哪个按钮——因为两个按钮都执行完全相同的函数，输出结果自然一致。
✅ 正确做法是：将待复制的文本作为参数传入函数，实现行为与数据的解耦。示例如下：
<script>
function copyText(textToCopy) {
navigator.clipboard.writeText(textToCopy)
.then(() => console.log(`Copied: ${textToCopy}`))
.catch(err => console.error('Failed to copy: ', err));
}
</script><p id="p1">
</p><div class="enabled-left-icon-4-9z5">
<button onclick="copyText('12345')">Copy 12345</button>
</div>
<p id="p2">
</p><div class="enabled-left-icon-5-MqF">
<button onclick="copyText('54321')">Copy 54321</button>
</div>
? 关键改进点说明：
- 函数 copyText(textToCopy) 接收动态文本参数，不再依赖内部硬编码；
- 每个
- 添加 .then() 和 .catch() 处理 Promise 结果，提升健壮性（navigator.clipboard.writeText() 返回 Promise）；
- 避免使用 id="p1"/id="p2" 在 JS 中做条件判断——既冗余又易出错，参数传递更清晰、可维护。
⚠️ 注意事项：
- 确保页面已启用安全上下文（HTTPS 或 localhost），否则 navigator.clipboard 将不可用；
- 不建议在生产环境直接使用内联 onclick，推荐通过 addEventListener 解耦 HTML 与 JS（尤其当按钮动态生成时）；
- 若需兼容旧版浏览器，可引入 document.execCommand('copy') 降级方案，但现代项目优先使用 Clipboard API。
通过这一模式，你可轻松扩展至 N 个按钮——只需为每个按钮传入唯一文本，无需新增函数或复杂 DOM 查询。简洁、可靠、可复用，是前端交互设计的最佳实践之一。
