<button onclick=...>和<a href="#" onclick=.../>有什么区别？

Question

<button onclick=...>和<a href="#" onclick=.../>有什么区别？

7

我发现很多时候网页使用"a"标签想要将其呈现为按钮的样式，大致如下：

<a href="#" class="button" onclick="...." />

我不明白为什么不直接使用"button"标签呢？例如下面的代码：

<button onclick="....">button</button>

什么是区别？我真的很想学习它，谢谢！

另一个情况的问题：

三个“类似按钮的<a>标签”如下：

enter image description here

提示：

不同的调用ajax然后获取不同时间段的记录
需要使用onclick="location.replace()"因为可以平稳地返回到上一页。

原始代码：

<a href="url" class="btn" >Today</a>

我已经更改为：

<a href="#" onclick="location.replace(url)" class="btn" >Today</a>

考虑以下事项：

<button onclick="location.replace(url)">Today</button>

在这种情况下，你会怎么做？使用button标签是否有问题？

- Sing

2

顺便提一下，type=button 是用于 <input> 标签，而不是 <button>。 - dandavis

此外，按钮不是自闭合的。 - Kolby

@dandavis和Kolby，感谢你们，我已经修改了它。 - Sing

不想挑剔，但应该是</button> :p - Kolby

2个回答

3

这里的答案是：语义。

锚点应该用于超链接，用于导航到另一个页面。它是用户通过点击链接可以访问数据的引用。

按钮是按钮。它用于功能。

在您的示例中，它们都调用onclick事件，因此它们只有一个区别。在锚点的情况下，您必须使用event.preventDefault()来覆盖默认行为。

此外，通过Google搜索的前三个结果：

http://davidwalsh.name/html5-buttons

HTML/CSS - 按钮 - 何时使用什么

http://www.reddit.com/r/Frontend/comments/1y9zdh/anchor_vs_button_a_question_on_html_semantics/

- Kolby

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Luaan · Accepted Answer

这基本上是一个历史文物。

它源自于更容易应用自定义样式到锚点的时候。通过在锚点内部使用更多元素，你可以轻松地构建自动大小的“按钮外观”锚点。

今天，随着增强的CSS选项和更好的浏览器兼容性，这不再需要。当button是正确的语义元素时，你没有理由使用a。

因此，用锚点链接到其他页面。它应该始终有一个href，而不仅仅是使用#和onclick。现在，你仍然可以使用onclick - 只是确保href引导你到与onclick相同的数据。当你想要让搜索机器人浏览你的网站时，这非常方便，即使实际用户将呈现例如更响应的接口（例如，通过AJAX下载更新的内容）。确保常见的在新窗口/标签中打开链接的方法仍然有效（ctrl+click、右键单击和中键单击都不应执行onclick操作）。

按钮是与当前页面交互的元素，无论是进行客户端脚本还是向服务器发送表单。

编辑：

随着你问题的编辑，显然你应该简单地使用一个带有正常href的锚点。没有理由使用onclick或button，你只是在创建一个简单的超链接，这就是锚点的作用。