如何在<button>上叠加可独立触发的<a>标签？无需JavaScript方案

算力阿峰

2026-7-6

问题：按钮内的链接点击时触发按钮而非跳转，求无JavaScript解决方案

之前搜过类似问题，得到的答案全是“别这么做，设计有问题”，没给出实际解决办法。但我这个场景里，这种设计是合理的，所以再来提问。

我有个表单，里面多个按钮是根据用户过往行为生成的，希望用户能移除不需要的按钮。我试了个方案（没成功）：在<button>里加<div><a><img></a></div>，把这个div绝对定位在按钮右上角，img是带“×”的删除图标。

现在的问题是：点击这个图片时，会触发按钮的提交行为，而不是跳转到移除按钮的链接。

能不能配置<a>标签，让它被点击时直接跳转链接，而不激活按钮？我需要不需要JavaScript的解决方案。

感谢，
mike

HTML示例（PHP生成）

<form>
...
<button class='cached-action' name='resume' value='mmayer123'>
  <div class='username'>Mike Mayer</div>
  <div class='userid'>mmayer123</div>
  <div class='forget'>
    <a href='http://demo.org/mypage?forget=mmayer123'>
      <img src='img/delete.png'>
    </a>
  </div>
</button>
...
</form>

上述操作、演示及链接地址均为虚构，仅作示意。

CSS代码

button.cached-action {
  width:100%;
  position:relative;
}
button.cached-action div.action {
  font-weight:bold;
  text-align:left;
  margin: 5px 8px 0 8px;
}
button.cached-action div.details {
  font-size:small;
  text-align:left;
  margin: -3px 8px 0 10px;
}
button.cached-action div.forget {
  position:absolute;
  top:5px;
  right:5px;
}
button.cached-action div.forget img {
  height:12px;
  width:12px;
}