javascript 锚href中的唯一哈希？

Sole hash in anchor href?

提问by Jasiu

In the project I work on I've recently moved from developing backend (i.e. non-web) servers to web-related things. In the HTML code I've found the following thing all over the place:

在我从事的项目中，我最近从开发后端（即非 Web）服务器转向了与 Web 相关的事物。在 HTML 代码中，我到处都发现了以下内容：

<a href='#'>some link</a>

Then some JS is attached to the clickevent of <a>element.

然后一些JS附加到元素的click事件<a>。

Does this sole hash has any special meaning? I understand how the href='#some_id'tells the browser to scroll to element with ID = some_id. But href='#'doesn't work that way, right? If it's all about creating a clickable piece of text, why not simply use a <span>?

这个唯一的哈希值有什么特殊含义吗？我了解如何href='#some_id'告诉浏览器滚动到 ID = 的元素some_id。但href='#'不是这样工作的，对吧？如果一切都是为了创建可点击的文本，为什么不简单地使用<span>?

采纳答案by Felix Kling

Exactly. What you see here is somehow bad design (although it is quite common to use href="#").

确切地。你在这里看到的是某种糟糕的设计（尽管使用 是很常见的href="#"）。

What it actually will do is jumping to the top of the page if the default action is not prevented.

如果不阻止默认操作，它实际上会跳到页面顶部。

Much better would be to

更好的是

• use a <button>and style it accordingly (maybe even only inserted via JavaScript)
• or let the link point to some real resource (that triggers some action on the server side) and attach the JavaScript event handler to do this (or similar) action on the client and prevent following the link (keyword: unobtrusive JavaScript).

• 使用 a<button>并相应地设置样式（甚至可能仅通过 JavaScript 插入）
• 或者让链接指向一些真实的资源（在服务器端触发一些操作）并附加 JavaScript 事件处理程序以在客户端执行此（或类似）操作并防止跟随链接（关键字：unobtrusive JavaScript）。

It also depends on whether the site is meant to run with disabled JavaScript. If yes, then such a link (but also a button) will not work.

它还取决于站点是否打算在禁用 JavaScript 的情况下运行。如果是，那么这样的链接（但也是一个按钮）将不起作用。

But in any case, from a semanticpoint of view, using a link solely to have something "clickable" is wrong.

但无论如何，从语义的角度来看，仅使用链接来获得“可点击”的内容是错误的。

回答by Spudley

A hash on its own links to the top of the page.

其自身链接到页面顶部的哈希值。

This is sometimes used for exactly this purpose -- ie a "Back to top" link, but more typically this kind of link is used in conjunction with a Javascript click even which returns false, and thus negates the action of the href.

这有时正是用于此目的——即“返回顶部”链接，但更典型的是，这种链接与返回 false 的 Javascript 单击结合使用，从而否定 href 的操作。

In this context, it is used in this way for the following reasons:

在这种情况下，它以这种方式使用，原因如下：

• An <a>tag may be semantically correct -- ie the item to be clicked on is acting as a link; ie to load more content, or open a popup, etc, even though it is using Javascript for it's functionality.

• Using an <a>tag also means that the element will be styled in the same way as other <a>tags on the site. This includes :hovereffect styles, etc. Note that IE6 only supports :hoveron <a>elements, and nothing else, meaning that if the site was designed to work in IE6 or still needs to support it, then you can't replicate this functionality with other tags. This was a very good reason to use <a>tags for this feature in the past, even if it wasn't appropriate semantically. These days it's less of an issue. Even in modern browsers, using <a>for these items is still useful for cutting down on replicated stylesheets if you want them to look the same as other links. Links also have a few other special features which may be difficult to replicate with other elements, such as being in the tab index sequence, etc.

• HTML requires that an <a>tag has a hrefattribute in order for the element to be rendered as a link, so the hash is used as a minimal value for this. In addition, having a hash in the hrefattribute means that the link won't cause any nasty unexpected consequenses if the user turns off Javascript or if the developer forgets to return false;. By contrast, having an empty string would cause it to reload the page, which is unlikely to be what you want if you have just run some javascript. It is however also common to have the link point to a valid URL, which would be run if Javascript was switched off; this is a good way to have a fall-back mechanism for your site. But it isn't always appropriate, and clearly isn't the intention here.

• 一个<a>标签可能是语义正确的-即可以点击充当链接的项目; 即加载更多内容，或打开弹出窗口等，即使它使用 Javascript 来实现其功能。

• 使用<a>标签还意味着该元素的样式将与<a>网站上的其他标签相同。这包括:hover效果款式等，需要注意的是IE6只支持:hover对<a>元素，没有别的，这意味着，如果网站的目的是要在工作或IE6仍然需要支持它，那么你不能复制与其他标签此功能。这是<a>过去为此功能使用标签的一个很好的理由，即使它在语义上不合适。这些天这不是一个问题。即使在现代浏览器中，使用<a>如果您希望它们看起来与其他链接相同，那么这些项目对于减少重复的样式表仍然很有用。链接还具有一些其他特殊功能，这些功能可能难以与其他元素一起复制，例如位于选项卡索引序列​​中等。

• HTML 要求<a>标签具有href属性，以便将元素呈现为链接，因此哈希值用作此的最小值。此外，在href属性中包含散列意味着如果用户关闭 Javascript 或开发人员忘记return false;. 相比之下，空字符串会导致它重新加载页面，如果您刚刚运行了一些 javascript，这不太可能是您想要的。然而，链接指向一个有效的 URL 也很常见，如果 Javascript 关闭，它将运行；这是为您的网站提供后备机制的好方法。但这并不总是合适的，而且显然不是这里的意图。

Given that the item is just triggering a click event in Javascript, there's no reason why you couldn't use any other element for this. You could very easily use a <span>(or even better, a <button>) instead, but the above points should show that there's nothing wrong with using an <a>tag.

鉴于该项目只是在 Javascript 中触发点击事件，因此您没有理由不能为此使用任何其他元素。你可以很容易地使用 a <span>（或者甚至更好， a <button>），但以上几点应该表明使用<a>标签没有任何问题。

Hope that helps.

希望有帮助。

回答by Quentin

Does this sole hash has any special meaning?

这个唯一的哈希值有什么特殊含义吗？

It links to the top of the page

它链接到页面顶部

Why not simply use a <span>?

为什么不简单地使用一个<span>？

• It won't be in the focus order
• It won't take on the default styles of something that should be clicked

• 它不会在焦点顺序中
• 它不会采用应该点击的东西的默认样式

A <button>would be better than a span. Something built on top of a server side alternative would be best.

A<button>会比跨度更好。建立在服务器端替代方案之上的东西是最好的。

回答by Jon

Because you want the browser to style this link the same as all other links, and without having to specify (e.g. with a class) that "you know, I want this to look like a link even though it's technically not". That's really not good for maintainability.

因为您希望浏览器将此链接的样式设置为与所有其他链接相同，并且无需指定（例如使用class）“您知道，我希望它看起来像一个链接，即使它在技术上不是”。这对于可维护性来说确实不好。

回答by Lightness Races in Orbit

Because:

因为：

• the styling is done for you;
• the link is semantically still a link, even if it starts off with a no-op href.

• 造型已为您完成；
• 该链接在语义上仍然是一个链接，即使它以 no-op 开头href。

Rhetorical question:
Can you explain why you think a spanis more appropriate than afor a link?

反问：
你能解释为什么你认为 aspan比a链接更合适吗？

Addendum:
Something like a buttonor another dynamic element may be better suited here, but taking a non-link spanof text and pretendingthat it's a link is worse.

附录：
像一个button或另一个动态元素之类的东西可能更适合这里，但采用非链接span文本并假装它是一个链接更糟糕。