按钮(<button>)内的超链接(<a>)点击无效问题求助

核心问题 #

HTML规范明确禁止在<button>标签内部嵌套交互式元素（比如<a>链接），这种无效结构会导致浏览器解析异常：你的下载链接点击事件被外层按钮的onclick="...; return false;"拦截了——return false会同时阻止事件冒泡和元素的默认行为，所以链接的跳转被直接禁用。而删除按钮能正常工作，是因为它自己的onclick里加了return false，阻止了事件冒泡到外层按钮，避开了按钮的拦截。

解决方案 #

方案1：重构结构（推荐，符合HTML规范） #

把外层的<button>换成<div>，用CSS模拟按钮的样式，这样内部的<a>链接就能正常触发默认跳转：

<div name="error_php_troubleshooting.txt" value="error_php_troubleshooting.txt" id="error_php_troubleshooting.txt" class="filelistitems" onclick="DevTracker.fileList('error_php_troubleshooting.txt');" style="background-color: rgba(255, 229, 143, 0.51); cursor: pointer;">
  <a class="deletelink" href="#" title="Delete File" onclick="DevTracker.deleteFile('error_php_troubleshooting.txt');return false;">X</a>
  <a class="filelinks" href="files/TEST02/error_php_troubleshooting.txt">error_php_troubleshooting.txt</a>
</div>

• 给div加cursor: pointer模拟按钮的点击反馈
• 去掉div的return false，因为div没有默认提交行为，不会干扰链接跳转

方案2：保留按钮结构（仅临时兼容） #

如果必须用<button>，需要修改事件逻辑，让下载链接的点击不被按钮拦截：

<button name="error_php_troubleshooting.txt" value="error_php_troubleshooting.txt" id="error_php_troubleshooting.txt" class="filelistitems" onclick="DevTracker.fileList('error_php_troubleshooting.txt'); return false;" style="background-color: rgba(255, 229, 143, 0.51);">
  <a class="deletelink" href="#" title="Delete File" onclick="DevTracker.deleteFile('error_php_troubleshooting.txt');return false;">X</a>
  <a class="filelinks" href="files/TEST02/error_php_troubleshooting.txt" onclick="event.stopPropagation();">error_php_troubleshooting.txt</a>
</button>

• 给下载链接的onclick加event.stopPropagation()，阻止事件冒泡到外层按钮，这样按钮的return false就不会影响链接的默认跳转行为

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