CSS点击事件失效排查及点击复制指定文本实现求助

一、你的点击事件失效的核心原因 #

兄弟，你踩了个很典型的新手坑——把onclick事件写进CSS里了！CSS只负责控制页面样式，完全不处理交互逻辑，onclick是HTML元素的专属属性，要么直接写在标签里，要么用JavaScript绑定，放在CSS里根本不会生效，这就是点击没反应的关键问题。

二、完整修复+复制功能实现方案 #

我直接给你写好正确的代码，顺便修正了你CSS里的小错误（text-decoration: bold是错的，加粗得用font-weight: bold）：

<head>
  <style>
    .button {
      background-color: #4CAF50;
      border: none;
      color: white;
      padding: 8px 15px;
      text-align: center;
      font-weight: bold; /* 替换错误的text-decoration:bold */
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- 把onclick事件移到button标签里 -->
  <button class="button" onclick="copyHello()">点击复制"Hello"</button>

  <script>
    function copyHello() {
      const targetText = "Hello";
      // 用现代浏览器支持的剪贴板API实现复制
      navigator.clipboard.writeText(targetText)
        .then(() => {
          // 复制成功后给个提示，提升用户体验
          alert("已成功复制：Hello");
        })
        .catch(error => {
          // 处理复制失败的情况（比如浏览器不支持、非HTTPS环境）
          console.error("复制出错了:", error);
          alert("复制失败，请检查浏览器环境后重试");
        });
    }
  </script>
</body>

额外的代码优化建议 #

如果你更倾向于HTML、CSS、JS彻底分离的写法，可以去掉button标签里的onclick，改用JS绑定事件，代码会更干净易维护：

// 等页面加载完成后再绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const copyBtn = document.querySelector('.button');
  copyBtn.addEventListener('click', function() {
    const targetText = "Hello";
    navigator.clipboard.writeText(targetText)
      .then(() => alert("已成功复制：Hello"))
      .catch(err => {
        console.error("复制失败:", err);
        alert("复制失败，请重试");
      });
  });
});

重要注意事项 #

• navigator.clipboard API需要在HTTPS环境下才能正常工作（本地开发的localhost是例外，完全没问题）；
• 如果要兼容非常老旧的浏览器，可以考虑用document.execCommand('copy')，不过这个方法已经被废弃了，优先用上面的剪贴板API。

内容的提问来源于stack exchange，提问作者Ahmad Egbaria