超链接(<a>)不工作按钮(<button>)

Question

因此，我有一个作为按钮生成的文件列表，它允许用户突出显示它们为onClick。我还将文件名作为超链接生成，因此用户可以直接下载这些文件。

这个按钮似乎正在覆盖超链接，我想知道我能做些什么来让它识别我的超链接点击。超链接在悬停时仍然下划线，所以它似乎是在注册我的光标，而不是单击。

<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">error_php_troubleshooting.txt</a>
</button>

我假设onClick事件正在覆盖超链接，但奇怪的是，X删除onClick寄存器。我试着用z变换把它带到顶层，但它似乎不起作用。

我相信这是非常愚蠢的事情，但我似乎不能用正确的组合给我带来我想要的结果。

Answer 1

HTML不允许按钮包含链接，反之亦然。

使用适当的语义元素(链接链接到URL，按钮提交表单或挂起JavaScript，复选框进行选择)，然后按需要应用CSS。

如果您需要多个控件，这些控件在单击时会执行不同的操作:将它们放在一起，而不是在彼此内部。

Answer 2

您可以选择以下几种方法：

1. 将onclick功能附加到按钮，以遵循所需的链接/URL，如下所示：

<button onclick="location.href='http://www.example.com'" type="button"> www.example.com</button>

1. 样式a标记，使其看起来像按钮

Answer 3

父元素OnClick将始终具有优先权。正如您前面提到的，您的deleteLink被注册了，但是它的OnClick不起作用，因为存在一个父按钮OnClick。

你的超级链接也是这样。

请检查下面我已经尝试过一个例子来使您的案例工作，即使这个不工作。

    <button name="b1" value="b1" id="b1" class="filelistitems" onclick="window.location.href='https://w3docs.com';" style="background-color: rgba(255, 229, 143, 0.51);">
<a class="X" href="#" title="X" onclick="window.location.href='https://www.youtube.com/';return false;">X</a>
<a class="Y" onclick='abc(event);' href="https://stackoverflow.com/">Y</a>
    </button>
<script>
function abc(event) { 
event.preventDefault();
      var href = event.currentTarget.getAttribute('href')
      window.location=href;
    }
    </script>

您可以做的是单独的按钮和锚标记功能。