在不包括 href 属性的情况下，使用锚点标签并通过 JavaScript 的 click 事件处理程序来使用它是否可行？这意味着我会完全省略 href，甚至不使用空值的方式 (href="")。
9个回答
241
在HTML5中，使用不带
示例：
href属性的a元素是有效的。它被认为是一个“占位符超链接”。示例：
<a>previous</a>
- dthrasher
2
3“占位符链接”的定义是什么？ - Gyum Fox
21请注意，如果没有
href属性，cursor: pointer样式将不会自动添加到该元素。 - Luke37
我的建议是使用<a href="#"></a>
如果你在使用JQuery，请记得同时使用：
.click(function(event){
event.preventDefault();
// Click code here...
});
- Gunnar Hoffman
11
8我不能使用 href="#"，因为我正在使用 AJAX 书签，这涉及更改哈希值，我该怎么办？ - john
5我使用"javascript:;"替代在href中使用"javascript:void(0);"，因为前者更短。 - Ally
17只有当你实际指定了空的 href 属性时，才会受到性能惩罚。问题说明根本没有 href 属性。 - Pete B
19根据这篇文章（也很合理），潜在的性能损失只适用于空的src属性。它并未说明空的href属性会对性能有什么影响。 - bergie3000
1href="#" 会导致滚动到顶部的问题。 - Dmitry Druganov
显示剩余6条评论
32
如果您必须为向后兼容使用href，则还可以使用
<a href="javascript:void(0)">link</a>
如果您不想使用属性，可以使用#的替代方法
- Rasive
1
3我需要一个像链接一样的<a>标签，除了功能以外。这对我很有帮助。 - Jad S
24
简短回答：不行。
长篇回答：
首先，没有href属性，它就不会成为一个链接。如果它不是一个链接，那么它将无法通过键盘（或呼吸开关，或其他非指针输入设备）访问（除非您使用HTML 5的tabindex功能，但这并不被普遍支持）。很少有情况下控件不具备键盘访问权限是合适的。
其次，当JavaScript无法运行时（因为从服务器加载速度慢、网络连接中断（例如在移动火车上的移动信号），JS被关闭等等），您应该提供替代方案。
通过渐进增强和不显眼的JS来实现。
长篇回答：
首先，没有href属性，它就不会成为一个链接。如果它不是一个链接，那么它将无法通过键盘（或呼吸开关，或其他非指针输入设备）访问（除非您使用HTML 5的tabindex功能，但这并不被普遍支持）。很少有情况下控件不具备键盘访问权限是合适的。
其次，当JavaScript无法运行时（因为从服务器加载速度慢、网络连接中断（例如在移动火车上的移动信号），JS被关闭等等），您应该提供替代方案。
通过渐进增强和不显眼的JS来实现。
- Quentin
17
6自 HTML4 开始（至少如此），在“a”标签上使用tabindex属性是有效的。http://www.w3schools.com/tags/att_global_tabindex.asp - technoTarek
@technoTarek — 是的，但
href 是必需的（除非它是一个命名锚点，在这种情况下，tabindex 没有意义）。在 HTML 5 中使用 tabindex 将无法聚焦的元素添加到 Tab 顺序中是一项新创新。 - Quentin4这是错误的。我无法确定你当时是否参考了较旧的HTML规范，但根据HTML5规范，没有href属性的a标签确实是完全有效的。 - michael
@michael — 这个问题说的是“安全”，而不是“有效”。我已经证明了为什么它是不安全的，而且我当时说的一切仍然是真实的。 - Quentin
tabindex 不是 HTML5 的功能。在 HTML4 中，使用没有 href 属性的 a 元素是有效的。在该元素上使用 tabindex 属性而没有 href 属性也是有效的 HTML4。你的“长答案”和“上下文”一样错误。我不明白你不理解什么。如果有人来到这个页面并看到你的答案，他们会带着错误的理解离开，更重要的是，得到一个完全错误的答案。无论如何，评论不是用来进行长时间讨论的，所以对于我的回复，我表示歉意。我不会再回复了。 - michael显示剩余12条评论
13
即使没有href属性，使用标签也是可以的。与这里许多答案所表示的相反，实际上有标准原因创建一个没有href的锚点。从语义上来说，"a"代表一个锚点或链接。如果你将其用于符合此含义的任何内容，则没问题。
不带href的标签的一个标准用法是创建命名链接。这允许您使用name = blah的锚点，稍后可以创建一个指向href=#blah的锚点以链接到当前页面的命名部分。但是，这已被弃用，因为您还可以以同样的方式使用ID。例如，您可以使用id = header的标题标签，然后稍后可以有一个指向href =＃header的锚点。
然而，我的观点不是建议使用name属性。仅提供一种无需href的用例，并因此说明它不是必需的原因。
- monokrome
2
2我认为问题想要问的是其他答案正在解决的问题，即是否可以安全地省略作为交互元素（即链接）使用的<a>元素的href属性。正如您所提到的，没有href属性，它就不是一个链接，只是一个锚点，这是完全不同的东西。 - BoltClock
2是的，但是 - 只是强调一下 - 在这些用例中，<a>标记仍然有效。 - monokrome
12
从可访问性的角度来看，没有 href 的
<a> 元素无法通过 Tab 键进行导航，所有链接都应该可以通过 Tab 键进行导航，所以如果没有 href，请添加 tabindex="0"。- user3862605
2
4如果按钮执行的是页面内操作而不是重定向，则使用按钮。 - AmbrosiaDevelopments
@SimonDever 我的CSS框架对按钮和链接的样式处理不同，因此这可能不适合某些情况。 - n_moen
8
在使用多级菜单并且需要展开下一级但不想让菜单标签成为活动链接时，没有“href”的<a>标签非常方便。我从来没有在这种方式下遇到过任何问题。
- Jon
2
2你尝试过用键盘访问那个菜单吗？ - aij
我刚刚发现在IE上，如果你悬停在某些链接上，其中一个是没有href属性的锚点，那么下方显示URL的小弹出窗口会一直停留在那里，显示之前的URL而不是消失。虽然这个锚点是不可点击的，但对我来说已经足够让我使用div代替了。 - Andrew
2
在某些浏览器中，如果没有提供href属性，您可能会遇到问题。我建议您编写类似以下代码：
<a href="#" onclick="yourcode();return false;">Link</a>
你可以用自己的函数或逻辑替换yourcode()，但一定要记得在末尾添加return false;语句。
- shashwat13
1
我正在使用Backbone.js和Backbone.Router，对于索引页我使用
#。 对于我的一些导航栏链接，我不想触发到#的路由，这就是如果你单独使用a href="#"会发生的事情。 使用<a href="#" onclick="return false;"可以阻止路由被触发，但点击事件仍会冒泡到我的处理程序中（使用通过jQuery和Backbone.Radio挂钩的DOM事件）。谢谢@shashwat13 :) - David Williamson0
只需在您的工作组件顶部添加以下代码即可消除此警告。
/* eslint-disable jsx-a11y/anchor-is-valid */
/* eslint-disable jsx-a11y/anchor-is-valid */
- Md Sajedul Islam
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
<span>元素可以通过键盘进行导航。您还可以使<a>元素不能通过键盘导航。 - zzzzBov