href="javascript:" 与 href="javascript:void(0)"答案

【问题标题】：href="javascript:" vs. href="javascript:void(0)"href="javascript:" 与 href="javascript:void(0)"
【发布时间】：2011-04-09 15:54:51
【问题描述】：

我们的网络应用程序完全在浏览器上呈现。
服务器仅通过 JSON 消息传递与浏览器对话。

因此，我们只需要一个应用程序页面，并且大多数<a> 标签都没有真正的href 指向其他页面。

在消除不必要的东西的过程中，我想知道是否可以摆脱我们代码中的无数 void(0)，因为它们看起来毫无用处：

<a onclick="fn()">Does not appear as a link, because there's no href</a>
<a href="javascript:void(0)" onclick="fn()">fn is called</a>
<a href="javascript:" onclick="fn()">fn is called too!</a>

有人知道使用href="javascript:" 是否会导致问题吗？
它甚至可以在 IE7 上运行...

请不要浪费宝贵的时间告诉我内联 javascript 不好，因为这是由模板引擎生成的 :)

【问题讨论】：

内联 JavaScript 不好 :)
@Second Rikudo，你所说的重复问题是在这个问题一年后提出的
@Mic 道歉，我从审核队列中得到了这个问题，并没有注意到日期（更重要的是，这个问题有更好的答案）。我将反转副本的方向。

标签： javascript

【解决方案1】：

它不会引起问题，但与PreventDefault一样是一个技巧

当您在页面中处于低位并且锚点为：

<a href="#" onclick="fn()">click here</a>

您将跳转到顶部，并且 URL 也将具有锚点 #，为避免这种情况，我们只需 return false; 或使用 javascript:void(0);

关于你的例子

<a onclick="fn()">Does not appear as a link, because there's no href</a>

只要a {text-decoration:underline;}，你就会有“link a-like”

<a href="javascript:void(0)" onclick="fn()">fn is called</a>
<a href="javascript:" onclick="fn()">fn is called too!</a>

没关系，但在你的function最后，只是return false;防止默认行为，你不需要做更多的事情。

【讨论】：

我以为链接没有href是不行的，但是它可以，只是默认的下划线和光标没有出现。完全删除 href 可能是我正在寻找的。我会做一些检查。
如果没有href，链接不能被标签（并获得焦点），太糟糕了。
如果你的函数最后返回false，只需输入href="#"就没有问题，所以它可以防止链接行为 - 你可以在这里测试它：jsbin.com/ipoda3
新版本，因此您可以看到浏览器上有滚动条时的行为：jsbin.com/ipoda3/2
我已经在我的页面中使用哈希键 (#) 进行导航和状态。我可以使用 href="#" 但必须添加到我所有的链接返回 false 与我今天的相比，这不是一个改进。

【解决方案2】：

在导航中使用javascript: 时，执行脚本的返回值，如果有，则成为浏览器中显示的新文档的内容。 JavaScript 中的void 运算符会导致其后面的表达式的返回值返回undefined，从而阻止此操作发生。你可以自己试一试，将以下内容复制到地址栏并回车：

javascript:"hello"

结果是一个只有单词“hello”的新页面。现在将其更改为：

javascript:void "hello"

...什么也没发生。

当您自己编写javascript: 时，不会执行任何脚本，因此该脚本执行的结果也是未定义，因此浏览器什么也不做。这使以下或多或少等效：

javascript:undefined;
javascript:void 0;
javascript:

除了 undefined 可以通过声明具有相同名称的变量来覆盖。 void 0 的使用通常是没有意义的，而且它基本上是从void functionThatReturnsSomething() 减少的。

正如其他人所提到的，在点击处理程序中使用return false; 比使用javascript: 协议更好。

【讨论】：

我同意这一切，但最后一点。 return false 和 void(0) 一样没用，除非你使用真正的 href
@Mic：如果您使用的是href="#"，则需要return false;，否则文档滚动将被重置。当然，如果你在链接中使用javascript:，return false 无论如何都会阻止该脚本被执行，所以从这个意义上说它是无用的。
在href 字段中使用 real URL 将事件处理程序附加到锚点的问题是，如果用户以另一种方式激活链接（例如，按下在锚点聚焦时输入，鼠标中键），即使他有 Javascript，href 仍然被跟踪（当然是预期的行为，但仍然很烦人）
@YiJ：在链接上按回车键将触发 onclick 事件。不确定鼠标中键。
@Andy 在 Firefox 上发生在我身上，用于鼠标中键。我使用这种方法作为没有 Javascript 的用户的后备，但后来在测试期间注意到了这种行为。事件处理程序不会触发，href 链接将在新选项卡中打开。

【解决方案3】：

使用 'javascript:void 0' 会导致 IE 出现问题

点击链接时会触发window的onbeforeunload事件！

<!doctype html>
<html>
<head>
</head>
<body>
<a href="javascript:void(0);" >Click me!</a>
<script>
window.onbeforeunload = function() {
    alert( 'oops!' );
};
</script>
</body>
</html>

【讨论】：

在 IE 11 中不再存在，所以这已经是历史了。

【解决方案4】：

如果您使用 jQuery 事件设置 onclick，则此方法在所有浏览器中似乎都可以：

<a href="javascript:;">Click me!</a>

如前所述，如果您使用 History（或 ba-bbq）JS 插件，href="#" 会更改 url 哈希并触发数据重新/加载。

【讨论】：

【解决方案5】：

你可以把它们都做成#的。

然后，您需要将 return false; 添加到任何调用锚点 onclick 的函数的末尾，以免页面跳转到顶部。

【讨论】：

我已经将# 键用于导航和状态目的。它在单页 Web 应用程序中很常见。所以我不能使用#
我想检查删除 void(0) 是否没有问题。如果我改用href="#"，我需要在所有onclick 中添加一个return false。我觉得也好不到哪里去。

【解决方案6】：

我通常不使用任何 href 并使用 css 更改方面，使它们看起来像链接。因此，您根本不必担心链接效果，除了您的应用程序的事件处理程序

a {
  text-recoration: underline;
  cursor: pointer;
}

【讨论】：

【解决方案7】：

javascript:void(0); --> this 执行 void 函数并返回 undefined。这可能与 IE 有问题。 javascript:; --> 这什么也没做。创建死链接最安全。 '#' --> 这意味着指向同一个 DOM，它会在点击时重新加载页面。

【讨论】：

【解决方案8】：

为什么所有的点击事件都是a href链接？

如果您使用span 标签与:hover CSS 和适当的点击事件，这将完全解决问题。

【讨论】：

这是相当激进的。虽然它是有道理的。我不知道...我需要一个链接标签。即：对于制表符，SPAN 不会获得焦点
@Mic 如果您只担心标签聚焦，则将span 指定为tabindex 将使其变得可聚焦。
@ji-jiang 确实，IE6 喜欢把它九岁的脚跟粘在任何可以放的地方:)
@ji-jiang 很挑剔，用“
我不推荐这个。可访问性的所有良好语义和最佳实践发生了什么，跨度首先是文本持有者而不是 LINK 或动作事件，如果您想使用另一个标签而不是您应该绝对使用输入类型="按钮"恕我直言。