Javascript <a> 不带 href="#" 的脚本链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11144653/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<a> script links without href="#"
提问by Dai
My web application uses a lot of <a href="#">Perform client script action</a>anchor links which are used for scripting (a habit I picked-up from my days as a Dreamweaver user well over 10 years ago) and now I'm beginning to question if this is necessary.
我的 Web 应用程序使用了大量<a href="#">Perform client script action</a>用于脚本编写的锚链接（这是我 10 多年前作为 Dreamweaver 用户时养成的习惯），现在我开始怀疑这是否有必要。
I don't actually know why <a href="#">is used in the first place - my guess is the presence of the hrefattribute causes browsers to apply the :linkand :visitedpsuedo-classes which simplifies stylesheets. It also makes the browser implicitly apply the cursor: pointerproperty which may be desirable.
我真的不知道为什么<a href="#">首先使用-我的猜测是对的存在href属性引起的浏览器应用:link和:visited伪类简化了样式表。它还使浏览器隐式应用cursor: pointer可能需要的属性。
I use jQuery (after a brief stint with MooTools) and the links work just as well without the href="#"attribute and value, so should I just remove the attribute entirely and modify my stylesheet to compensate for the removal of the :linkpsuedo-class? Is there anything else I might be missing, any kind of semi-documented voodoo that the href attribute imbues the anchor element?
我使用 jQuery（在使用 MooTools 短暂停留之后）并且链接在没有href="#"属性和值的情况下也能正常工作，所以我应该完全删除该属性并修改我的样式表以补偿:link伪类的删除吗？还有什么我可能会遗漏的吗，href 属性灌输锚元素的任何类型的半记录伏都教？
回答by zzzzBov
<a>stands for anchor
<a>代表锚
If you include the [href]attribute on an <a>element, it is an anchor that points to a location, which means that you could go to a new page, a particular fragment of the current page (hence the #being called the fragment identifier), or a particular fragment of a new page.
如果您[href]在<a>元素上包含该属性，则它是指向某个位置的锚点，这意味着您可以转到新页面、当前页面的特定片段（因此#称为片段标识符）或特定的新页面的片段。
<a>elements without an [href]attribute were historically assigned a [name]attribute, which could be used as the destination of the fragment identifier. Browsers later added support for linking to any item's [id]attribute, and this is now the preferred method for linking to a document fragment.
<a>没有[href]属性的元素在历史上被分配了一个[name]属性，该属性可以用作片段标识符的目的地。浏览器后来添加了对链接到任何项目[id]属性的支持，现在这是链接到文档片段的首选方法。
What does this mean for standalone <a>elements?
这对独立<a>元素意味着什么？
An a[href]element is a link(which is why they are matched with :linkin css). linksare clickable. An aelement without the [href]attribute is otherwise just a placeholder for where a link might otherwise have been placed, and not clickable, nor are they in the tabbing order of the page.
一个a[href]元素是一个链接（这就是它们:link在 css中匹配的原因）。链接是可点击的。否则，没有该属性的a元素[href]只是一个占位符，用于放置链接的位置，不可点击，它们也不在页面的 Tab 键顺序中。
If you want your links to be keyboard navigable which is important for accessibility (WAI-ARIA), you'll need to do one of the following:
如果您希望您的链接可通过键盘导航，这对可访问性很重要 ( WAI-ARIA)，您需要执行以下操作之一：
- change the element to
<button type="button"> - keep the
[href]attribute - add
[tabindex="0"]and one of[role="button"]or[role="link"](and possibly some styling)
- 将元素更改为
<button type="button"> - 保留
[href]属性 - 添加
[tabindex="0"]和之一[role="button"]或[role="link"]（可能还有一些样式）
More information about the [role]attribute can be found in the Roles Model sectionof the WAI-ARIA docs.
有关更多信息[role]属性中可以找到角色Model部分的的WAI-ARIA文档。
Changing the markup
更改标记
If you don't have a reason to keep the [href]attribute, you might as well be using a <button>element:
如果您没有理由保留该[href]属性，您不妨使用一个<button>元素：
<button type="button">
^^^^^^^^^^^^^
The [type]attribute is used to make the element a generic button, otherwise <button>will default to [type="submit"], which may not be desirable as it could trigger form submission.
该[type]属性用于使元素成为通用按钮，否则<button>将默认为[type="submit"]，这可能是不可取的，因为它可能会触发表单提交。
If you can't use a <button>(usually occurs when the inner markup must contain a <div>) you can fake a <button>using:
如果您不能使用 a <button>（通常发生在内部标记必须包含 a 时<div>），您可以<button>使用以下方法伪造 a ：
<div role="button" tabindex="0">Some clickable text</div>
You'll need to listen for keypressevents and trigger clickevents for Enterand Space.
你需要监听keypress的事件和触发click事件Enter和Space。
Keeping the markup
保留标记
If you're keeping the <a>element and its [href]attribute, there are a number of options for its value.
如果您要保留<a>元素及其[href]属性，则它的值有许多选项。
A real link
真正的链接
E.x.
前任
<a href="/some/location/for/users/without/js"><a href="#document-fragment">
<a href="/some/location/for/users/without/js"><a href="#document-fragment">
If you need to provide support for users with JS disabled, you might as well direct them to a page that performs equivalent functionality without JS.
如果您需要为禁用 JS 的用户提供支持，您不妨将他们定向到一个在没有 JS 的情况下执行等效功能的页面。
By extension, this also includes providing document fragment links to link to the content within the same document. For example, a toggleable region may be marked up as:
通过扩展，这还包括提供文档片段链接以链接到同一文档中的内容。例如，可切换区域可以标记为：
<a href="#more" class="toggleable">Read More</a>
<div id="more">Lorem ipsum dolor sit amet</div>
So that with JS the region can be collapsed and expanded, and without JS the link will take the user to the appropriate content on the page.
这样使用 JS 区域就可以折叠和展开，如果没有 JS，链接会将用户带到页面上的相应内容。
A dud href
一个无用的href
E.x.
前任
<a href="#"><a href="javascript:void(0)"><a href="about:blank">
<a href="#"><a href="javascript:void(0)"><a href="about:blank">
If you're preventing the default behavior behind-the-scenes in JavaScript, and you're not supporting users with JS disabled, you can use a "dud" href value to keep the link in the tabbing order and automatically enable Enterto trigger the clickevent. You shouldadd [role="button"]as semantically the <a>tag is no longer being used as a link, but as a button.
如果您正在阻止 JavaScript 中的幕后默认行为，并且您不支持禁用 JS 的用户，则可以使用“dud” href 值将链接保持在 Tab 键顺序并自动启用Enter以触发click事件。您应该添加[role="button"]语义上的<a>标签不再被用作链接，但作为一个按钮。
<a href="#" role="button">Some clickable text</a>
回答by Niet the Dark Absol
Personally I prefer to use href="javascript:void(null);", to give the browser an href that won't mess up any other use of hashes.
就我个人而言，我更喜欢使用href="javascript:void(null);", 为浏览器提供一个不会破坏任何其他散列使用的 href 。
The only difference I've noticed about href-less links is that the browser will not underline them by default, so just add that style in and you should be good.
我注意到关于无href 链接的唯一区别是浏览器默认情况下不会给它们加下划线，所以只需添加该样式就可以了。
回答by Rakib
I was implementing a HTML, CSS, JS template to React and this line of code works for me perfectly:
我正在为 React 实现一个 HTML、CSS、JS 模板，这行代码非常适合我：
<a href={() => false}> Link </a>
回答by Rob
Not aware of any voodoo but if you have many links on the page and you pull the href then you will have to add a class name to give you the blue and underline on each. In other words why introduce more work when the browser will all ready take care or it. So in short stick with what you know and I suspect that if you remove the href the page will not validate http://validator.w3.org/
不知道任何伏都教，但如果页面上有很多链接并且您拉了 href，那么您将不得不添加一个类名，以便在每个链接上为您提供蓝色和下划线。换句话说，当浏览器都准备好照顾它时，为什么要引入更多的工作。所以简而言之，坚持你所知道的，我怀疑如果你删除了 href 页面将不会验证http://validator.w3.org/
回答by Virge Assault
I had this issue, specifically needing an accordion title to be an <a>so that it could be tabbed but not clicked. This will not work without an href, so I put text of an id after the "#" in the href and it appears to work. It makes the links accessible for tabbing, but not able to be clicked.
我遇到了这个问题，特别需要一个手风琴标题，<a>以便它可以被标签化但不能被点击。如果没有href，这将不起作用，所以我在href中的“#”之后放置了一个id文本，它似乎可以工作。它使链接可以通过标签访问，但不能被点击。
<a href="#${accordionGroup.id}"> Title </a>
<a href="#${accordionGroup.id}"> Title </a>
which outputs as:
其输出为：
<a href="#acc234923"> Title </a>
<a href="#acc234923"> Title </a>
