在 HTML 按钮标签内有一个锚标签答案

【问题标题】：Having an anchor tag within an HTML button tag在 HTML 按钮标签内有一个锚标签
【发布时间】：2019-10-17 03:37:06
【问题描述】：

我在 HTML 中的按钮标签描述中有一个锚标签，如下所示：

<button type="submit" onClick="handleSubmit()">Desc.... 
   <a href="https://......." target="_blank">Click here for more details</a>
</button>

现在，当我单击锚文本时，执行“handleSubmit()”操作而不是转到我的 https:// 链接。显然，我的文本也被视为按钮而不是超链接。

我尝试将 z-index 属性添加到 (z-index: 1) 的 CSS 中，以使其可独立点击，使其覆盖在按钮标签的顶部，但没有乐趣！

但是，如果我右键单击文本，我确实会看到在新选项卡中打开 https 链接的选项，而且效果非常好。只有当我正常单击它（左键单击）时，按钮单击处理程序才会执行，就好像它被单击的按钮而不是锚标记一样。

我该如何解决这个问题？任何帮助将不胜感激，谢谢。

【问题讨论】：

如果您不想提交按钮，更好的方法可能是只使用锚点而不使用按钮，然后将其设置为您的按钮样式。
我确实希望按钮提交。如果用户单击提交，我希望按钮执行某些操作。锚标记只是一个超链接，单击时应显示附加信息。
您是否希望按钮提交并在单击锚点时显示更多详细信息？
你的按钮里面不应该有链接。这只会把事情搞砸，为你的按钮使用事件监听器来处理点击。
我赞同@rafaelcastrocouto 的说法，只是不要将链接放在按钮内。它在那里不需要，也没有多大意义。如果你真的需要它，那么使用 event.preventDefault() 来抑制链接行为。

【解决方案1】：

我不太明白你是否打算在任何情况下使用 onClick 内的函数。您可以交换元素的包装，以便按钮位于链接内；您也可以像这样在 onClick 中移动链接：

onClick="window.location.href='link'"

认为这可能是几个解决方案，您需要明确您希望从代码中获得的确切行为。

【讨论】：