本文讲解如何通过参数化函数为不同按钮绑定各自对应的复制内容，避免所有按钮都复制同一文本的问题，确保点击任一按钮时仅复制其指定的字符串。
本文讲解如何通过参数化函数为不同按钮绑定各自对应的复制内容，避免所有按钮都复制同一文本的问题，确保点击任一按钮时仅复制其指定的字符串。
在实际开发中，若多个按钮共用同一个 copyText() 函数，且函数内部硬编码了固定值（如连续调用 writeText("12345") 和 writeText("54321")），不仅逻辑错误（后一次调用会覆盖前一次），更会导致所有按钮行为完全一致——这显然违背了“按钮一复制 12345、按钮二复制 54321”的设计意图。
正确做法是将待复制的内容作为参数传递给函数，实现行为解耦。以下是优化后的完整实现：
<script>
function copyText(textToCopy) {
// 添加基本错误处理，提升健壮性
if (!textToCopy || typeof textToCopy !== 'string') {
console.warn('Invalid copy content:', textToCopy);
return;
}
navigator.clipboard.writeText(textToCopy)
.then(() => {
console.log(`Copied: "${textToCopy}"`);
})
.catch(err => {
console.error('Failed to copy text: ', 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 结果，便于调试与用户反馈（如配合 Toast 提示）；
- 增加输入校验，防止空值或非字符串类型导致静默失败。
⚠️ 注意事项：
- navigator.clipboard 需运行在安全上下文（HTTPS 或 localhost），HTTP 站点将抛出权限错误；
- 避免在函数内硬编码多个 writeText() 调用——它们会串行执行但仅最后一次生效；
- 如需动态读取元素内容（如按钮旁的 文本），可改用 this.nextElementSibling.textContent 等 DOM 查询方式，但参数直传仍是推荐的简洁方案。
通过这一模式，你可轻松扩展至任意数量的复制按钮，每个按钮职责单一、逻辑清晰、易于维护。
