JavaScript锚点标记的正确href值是什么？

Question

我通常需要将JavaScript函数绑定到锚点单击事件上。使用jquery或onclick内联属性很容易实现。

但是，我的问题是我不知道保持空的href的最佳方法是什么。

例如：

1. <a href="javascript:void(0)"> - 看起来代码有点多，只是为了保持空白
2. <a href=#> - 如果我不想转到另一页，必须在JavaScript调用中返回false
3. <a href> - 这个选项会破坏光标和悬停样式，浏览器不会将其呈现为链接
4. <a> - 同上

空锚点的最佳href值是什么？我不感兴趣在没有JavaScript的情况下保持功能。

- Martin Borthiry

---

可能是重复的问题：JavaScript链接的Href值使用"#"还是"javascript:void(0)"？ - JJJ

参见：https://dev59.com/yVPTa4cB1Zd3GeqPm9v9 - Felix Kling

如果元素没有链接功能，则不要使用链接。请改用“按钮”。 - Felix Kling

Answer 1

正确的方法是使用一个空的`a`元素`href`属性，并在Javascript中绑定点击事件。

为了实现无侵入式设计，您应该有一个带有正确链接的`href`属性（这样那些没有JavaScript的人仍然可以使用该网站），并在Javascript中删除该属性，绑定点击事件。

如果您只是将`a`元素用作绑定点击事件的目标，请考虑改用`div`或`span`。

- Oded

---

那是如果点击会导航（例如ajax）。但并不总是这样。 - Rok Kralj

根据功能不同，使用“按钮”可能更加合适。 - Felix Kling

这是一个非常有争议的问题，因为按钮通常依赖于浏览器和操作系统，并且很难进行样式化。 - Rok Kralj

@Rok：它们很容易进行样式设计，就像其他任何元素一样。例如：http://jsfiddle.net/9j5yb/1/ - Felix Kling

当然，我知道。但是需要几行代码来删除所有依赖于操作系统的代码。归根结底 - 差异只在语义上存在 - 对于SEO而言。 - Rok Kralj

Answer 2

不要使用A元素。您也可以使DIV可点击或任何其他元素。

或者您也可以简单地省略href属性，像这样。

<a onclick="myFunction();">dasd</a>

如果您也想将其看作链接，请在CSS中添加以下内容：

a {
  text-decoration: underline;
  color: blue;    
}​

- Rok Kralj

---

如果省略 href，则不会呈现为链接。 - Felix Kling

你的意思是什么，那不是真的。该元素仍然遵循所有CSS规则。 - Rok Kralj

这只是浏览器预定义的渲染方式，如果你关心设计，就不应该使用它。始终为链接设置样式。请参见：http://jsfiddle.net/b59Pa/ - Rok Kralj

那个琴是怎么回事？这就是我展示的。无论如何，在这种情况下，它不用作锚点或链接，使用button会更合适。当然，您可以使用CSS以任何方式样式化任何元素，但您最初的答案表明可以省略href，这是不正确的。 - Felix Kling

http://jsfiddle.net/b59Pa/3/ 这并不是问题所在。提问者说：“但是，我的问题是我从来不知道保持 href 为空的最佳方法。” - Rok Kralj

Answer 3

我个人坚信使用JavaScript来扩展功能，而不是替换它。话虽如此，我会留下指向“安全”回退操作的锚点，这些操作实际上只是通过JavaScript执行的。简单地说：

<a href="/users/create" class="user-create"></a>

然后，如果JavaScript能够成功加载并绑定到元素，则补充（并返回false），否则仍然为用户提供完成任务的能力，即使他们没有JavaScript（通过插件阻止或未加载）。

- Brad Christie

---

那是如果点击会导航（例如ajax）。但并不总是这样。 - Rok Kralj

@RokKralj：除了 UI 转换，我不同意。您可以在页面转换中执行任何其他单击操作（可能不那么漂亮，但是是可行的）。--跟进：想想在 SO 上您可以执行的所有操作：评论、投票、标记等等。所有这些都可以通过跟进到另一页来完成。这可能会很丑陋（按照今天的标准），但是它是可行的（他们是如何在 90 年代做到的？）唯一的例外是“添加评论”等需要显示/隐藏内容的操作，但是如果没有 JavaScript，您只需将其保持可见即可。 - Brad Christie

Answer 4

我认为

<a href="javascript:;"></a>

或者

<a href="javascript:void;"></a>

使用空锚点是最好的方式。

以及

<a href="#someId"></a>

将页面移动到具有id="someId"的dom元素

- Kevin

Answer 5

<a href=#>ABC</a>

=> 点击上面的链接会在地址栏中设置URL，从而使文档闪烁或重置滚动位置

为了避免以上问题， 可以使用<a href=# onclick="return false" >abc</a> 并像往常一样绑定事件处理程序使用jQuery 或者您可以在onclick上执行任何返回false值的函数。

- SN003

Answer 6

这要看情况。如果你点击一个锚点来打开页面上的面板，那么我很乐意使用选项2，但前提是我要用JavaScript插入该锚点。

这意味着在禁用JavaScript的情况下，该锚点不会显示，面板应该可见。

如果链接指向某个地方，则需要像Brad Christy和Odin所说的那样获取实际链接地址。

- anon-e-mouse