“javascript:void（0）”是什么意思？

Question

<a href="javascript:void(0)" id="loginlink">login</a>

我已经看过很多次了，但我不知道这到底是什么意思

Answer 1

The void operator evaluates the given expression and then returns undefined.

The void operator is often used merely to obtain the undefined primitive value, usually using “void(0)” (which is equivalent to “void 0”). In these cases, the global variable undefined can be used instead (assuming it has not been assigned to a non-default value).

这里提供了一种解释：^{} operator

使用链接的href执行此操作的原因是javascript:URL通常会将浏览器重定向到计算该JavaScript结果的纯文本版本。但是如果结果是undefined，那么浏览器将保持在同一页面上void(0)只是一个简短的脚本，其计算结果为undefined

Answer 2

除了技术性的回答之外，javascript:void意味着作者做得不对

没有充分的理由使用javascript:伪URL（*）。在实践中，如果有人尝试“书签链接”、“在新选项卡中打开链接”等操作，它将导致混乱或错误。现在人们已经习惯用鼠标中键点击新标签了：它看起来像一个链接，你想在一个新标签中阅读它，但结果证明它根本不是一个真正的链接，当鼠标中键点击时会产生不想要的结果，比如空白页或JS错误

<a href="#">是一种常见的替代方案，可以说不那么糟糕。但是，您必须记住从onclick事件处理程序中return false，以防止链接被跟踪并向上滚动到页面顶部

在某些情况下，可能有一个实际有用的地方指向链接。例如，如果您有一个控件，可以单击该控件打开以前隐藏的<div id="foo">，那么使用<a href="#foo">链接到该控件是有意义的。或者，如果有一种非JavaScript的方式来做同样的事情（例如，“thispage.php？show=foo”将foo设置为可见，那么您可以链接到它

否则，如果一个链接只指向某个脚本，它就不是一个真正的链接，也不应该这样标记。通常的方法是将onclick添加到<span>、<div>或不带href的<a>中，并以某种方式对其进行样式设置，以明确您可以单击它。这就是StackOverflow[在撰写本文时所做的；现在它使用href="#"]

这样做的缺点是您失去了键盘控制，因为您无法在span/div/bare-a上进行制表或使用空格激活它。这是否实际上是一个缺点取决于元素打算采取什么样的操作。您可以通过在元素中添加tabIndex并监听空格键来尝试模拟键盘的可交互性。但它永远不会100%再现真实的浏览器行为，尤其是因为不同的浏览器对键盘的响应不同（更不用说非视觉浏览器了）

如果您确实想要一个不是链接但可以通过鼠标或键盘正常激活的元素，那么您需要的是一个<button type="button">（或者<input type="button">对于简单的文本内容来说同样好）。如果需要，您可以随时使用CSS对其重新设置样式，使其看起来更像链接而不是按钮。但由于它的行为像一个按钮，这就是你应该如何标记它

（*：无论如何，在站点创作中。显然，它们对bookmarklet很有用。javascript:伪URL在概念上是一个奇怪的东西：一个定位器不指向某个位置，而是调用当前位置内的活动代码。它们给浏览器和Web应用程序带来了巨大的安全问题，网景公司不应该发明它。）

Answer 3

这意味着它什么也做不了。这是试图让链接不在任何地方“导航”。但这不是正确的方法

实际上，您应该只在onclick事件中执行return false，如下所示：

<a href="#" onclick="return false;">hello</a>

通常，如果链接正在执行一些“JavaScript-y”操作，就使用它。比如发布AJAX表单，或者交换图像，等等。在这种情况下，您只需使被调用的函数返回false

然而，为了让你的网站完全棒极了，如果浏览它的人选择不运行JavaScript，通常你会包含一个执行相同操作的链接

<a href="backup_page_displaying_image.aspx"
   onclick="return coolImageDisplayFunction();">hello</a>