如何实现点击CSS图标全区域触发JS onclick复制事件

现有代码点击空白区域失效核心有两个原因：

• 事件取值逻辑依赖event.target：当你点击.whitepaper（白色边框图标容器）的上下空白区域时，event.target指向的是.whitepaper本身；点击中间URL文字时，event.target指向的是内部的.blackframe/文字节点，两种场景下DOM层级不一致，原代码写死的event.target.parentNode.nextSibling.nextSibling在点击空白时会找错节点，拿不到待复制的链接。
• HTML存在重复id：三个复制输入框都用了同一个id="myInput"，不符合HTML规范，后续易引发兼容问题。

1. 修正JS事件逻辑（核心修改，改完即可实现全区域点击触发） #

将JS中的事件目标从event.target替换为event.currentTarget，该属性始终指向绑定onclick事件的.whitepaper元素本身，不受点击内部子元素的影响，同时用更稳定的nextElementSibling替代nextSibling匹配节点，避免文本节点干扰：

function myFunction(event) {
  // 阻止事件冒泡，避免点击时误触发手风琴的折叠/展开
  event.stopPropagation();
  // 始终从绑定点击事件的图标容器出发，找相邻的链接输入框
  const copyText = event.currentTarget.nextElementSibling.value;
  navigator.clipboard.writeText(copyText);
  alert("Copied: " + copyText);
}

2. （可选优化）调整CSS消除布局缝隙，让点击体验更统一 #

如果希望中间黑色URL块和白色边框完全贴合，没有视觉上的点击空隙，可以修改.blackframe的样式，去掉上下margin改用内边距居中内容，让黑色块填满整个白色图标容器：

.blackframe {
  text-align: center;
  background-color: black;
  cursor: pointer;
  font-family: Tahoma, Geneva, sans-serif;
  font-size:12px;
  font-weight:bold;
  /* 替换原有margin: 12px 0 12px 0; */
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 12px 0;
  color: white;
}

3. （可选规范优化）移除重复id #

现有代码不再需要通过id查找输入框，可以把三个input标签上重复的id="myInput"属性删除，符合HTML规范要求。

修改完成后，点击CSS图标的白色边框、上下空白区域、中间URL文字，都可以正常触发复制逻辑，和原有点击文字的功能表现完全一致。

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