“javascript:void(0)”是什么意思？答案

【问题标题】：What does "javascript:void(0)" mean?“javascript:void(0)”是什么意思？
【发布时间】：2010-11-20 11:41:52
【问题描述】：

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

这样的hrefs我见过很多次了，但我不知道这到底是什么意思。

【问题讨论】：

javascript: 是众多 URI 方案之一：en.wikipedia.org/wiki/URI_scheme，如 data:。
您可以只使用href="javascript:" 来达到同样的目的。正如this question 的答案中所述，void(0) 部分最初用于javascript: URI 处理不同的早期版本的浏览器。但是现在我什至找不到速记不起作用的版本，至少 IE7 可以正确处理。
我也看过 href="javascript://"，这样更好吗？
href="javascript://" 对我不起作用 void(0) 完美。
@sandip 你当时用的是哪个浏览器？ href="javascript://" 和 href="javascript:void(0)" 是等价的。 // 是 JS 注释。

标签： javascript void

【解决方案1】：

void 运算符评估给定的表达式，然后返回undefined。

void 运算符通常仅用于获取undefined 原语值，通常使用“void(0)”（其中相当于“void 0”）。在这些情况下，全局变量undefined 可以代替使用（假设它有未分配到非默认值值）。

此处提供了解释：void operator。

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

【讨论】：

href 被赋予“未定义的原始值”是什么意思？
“通常一个 javascript: url 会将浏览器重定向到评估该 javascript 的结果的纯文本版本。”你能在这里举个例子吗？我从未见过这样的用法。
凤凰所说的一个例子是现在就做！。如果 dosomething 返回 false，那么单击链接只会导致浏览器退出页面并显示“false”。但是... 现在就做！避免了这个问题。继续粘贴 javascript: 1+1;进入您的浏览器地址栏。浏览器应显示“2”
因为 void 是一元运算符。 Void 不是一个值，也不是一个函数。它需要一个值才能对其右侧进行操作，否则会抛出错误。
尝试查看错误控制台？它肯定会引发语法错误。这是无效的javascript。 Douglas Crockford 建议远离 void，因为一元运算符/函数/值的混淆处理起来成本太高。

【解决方案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> 或不带<a> 的href 中，并以某种方式对其进行样式设置以明确您可以单击它。这就是 StackOverflow [在撰写本文时所做的；现在它使用href="#"]。

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

如果你真的想要一个不是链接但可以通过鼠标或键盘正常激活的元素，你想要的是<button type="button">（或<input type="button">，对于简单的文本内容也一样好） .如果你愿意的话，你总是可以使用 CSS 来重新设置它的样式，使它看起来更像是一个链接而不是一个按钮。但由于它的行为就像一个按钮，所以你应该这样标记它。

(*: 无论如何，在站点创作中。显然它们对书签很有用。javascript: 伪 URL 是一个概念上的怪异：一个不指向位置的定位器，而是调用当前位置内的活动代码. 它们对浏览器和 web 应用程序都造成了巨大的安全问题，不应该由 Netscape 发明。）

【讨论】：

除了@bobince 的出色帖子之外：几个月前，我对hrefs 的跨浏览器键盘导航性进行了一些研究，包括怪癖和副作用；你们中的一些人可能会觉得它很有用：jakub-g.github.com/accessibility/onclick
<a href="#"> 优于 <span> 出于可访问性原因，所以我很高兴 SO 已经改变。但我的偏好仍然是<button type="button">/<input type="button"> + 造型。
这是一个观点，不回答问题。很多情况下需要void(0)； "#" 是一个 hack，它带来了很多问题（它在我正在编写的应用程序中不起作用，它把我带到了这个页面）。
我同意@feltwithe。为什么要强迫别人“以特定的方式去做”？在 15 年的编程生涯中，我还没有看到“应该始终以这种方式完成”的座右铭如何不会导致人们陷入自己制造的混乱
从用户体验的角度来看，使用 fragment-id 是一个坏主意，因为它会导致文档跳转到页面顶部，除非使用 preventDefault。如果锚点被用作表单上的按钮，请不要这样做。

【解决方案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>

【讨论】：

no no - return false 将停止默认行为，因此 # 永远不会出现
javascript: url 协议是事实上的标准，而不是真正的标准。所以 href="#" onclick="return false;"是否符合标准，而 href="javascript:void(0)" 则不符合，因为没有官方标准指定应该做什么。
最重要的是，Douglas Crockford 不喜欢 void，所以 jslint 会抱怨它。基本上，由于 void 是一个运算符，而不是一个值，它会让人非常困惑，并且会产生许多诸如此类的问题。最好完全避免它。哈哈。
布兰登：见布伦顿的回复。我推荐的方式是最受支持的，正如我在帖子的第二部分中所说，在“正确”的站点中，您甚至不会使用“#”，因为您将提供备用系统来处理缺乏javascript。
+1 用于包含 非常棒的 示例。即使您在 JavaScript 中所做的事情没有静态 HTML 后备，您也可以随时执行 <a href="enableJavaScriptToSeeMyCompletelyAwesomeSite.html" onclick="completelyAwesome();return false;"> 之类的操作。

【解决方案4】：

这是一种非常流行的向 HTML 链接添加 JavaScript 函数的方法。
例如：您在许多网页上看到的 [Print] 链接是这样写的：

<a href="javascript:void(0)" onclick="callPrintFunction()">Print</a>

为什么我们需要href 而只有onclick 才能完成工作？因为当用户在没有href 的情况下将鼠标悬停在文本“打印”上时，光标将变为插入符号 (ꕯ) 而不是指针 (?)。只有在 a 标记上使用 href 才能将其验证为超链接。

href="javascript:void(0);" 的替代方法是使用href="#"。这种替代方案不需要在用户的浏览器中打开 JavaScript，因此兼容性更高。

【讨论】：

如果关闭了 javascript，也不会做任何有用的事情。
您不需要href 来获取指向手形光标；只需要一点 CSS。
为什么不把 JavaScript 函数放在 href 而不是 onclick 中？
我同意@Sid - 如果您使用它来触发javascript函数，那么<a href="javascript:callPrintFunction()"> 更干净（尽管如果它应该是button 而不是anchor实际上不会带你去任何地方）。
href="#" 可能会导致令人讨厌的意外——比如中止的 xhr 请求，恰好在点击该链接时被调用。如果用户碰巧位于不是站点根目录的地址中，我最近很难调试一个中止 oidc 登录请求的网站。 # href 导致它在 xhr 请求完成之前重新加载地址。

【解决方案5】：

# 与 javascript:void(0); 的行为存在巨大差异。

# 将您滚动到页面顶部，但 javascript:void(0); 不会。

如果您正在编写动态页面，这一点非常重要，因为用户不想在点击页面上的链接时返回顶部。

【讨论】：

@Salvin：scroll-to-top-of-page 行为可以通过将 false 返回到事件处理程序来抑制：onclick="doSomething();return false;"，或者如果 @987654327 @返回false，你可以使用onclick="return doSomething();"。
@GrantWagner - 或者，5 年后，e.preventDefault()。
您可能想要编辑/删除此答案，因为 "#" 在您返回 false 时不滚动到顶部。
@Navin 你是对的，但现在这是一种过时的做法。 trysis 的评论现在被认为是正确的方式。
@trysis 或者，在内联 html 中，使用 event 表示 e。 event 变量在内联 html onclick 处理程序中可用。 <a href="#" onclick="event.preventDefault();">...</a>

【解决方案6】：

您的 a 标记上应该始终有一个 href。调用返回“未定义”的 JavaScript 函数就可以了。链接到“#”也是如此。

Internet Explorer 6 中没有 href 的锚标记不会应用 a:hover 样式。

是的，这是一种可怕的反人类罪行，而且是轻微的罪行，但总体而言，Internet Explorer 6 也是如此。

我希望这会有所帮助。

Internet Explorer 6 实际上是一项重大危害人类罪。

【讨论】：

【解决方案7】：

值得一提的是，您有时会在检查未定义时看到void 0，这仅仅是因为它需要的字符更少。

例如：

if (something === undefined) {
    doSomething();
}

相比：

if (something === void 0) {
    doSomething();
}

出于这个原因，一些缩小方法将undefined 替换为void 0。

【讨论】：

一个值得注意的例子是 TypeScript (live example)，它编译默认参数值以检查 void 0。当许多方法都使用默认参数值时，这 3 个字符的差异会迅速增加。
“出于这个原因，一些缩小方法将 undefined 替换为 void 0。”终于明白了！感谢@squall 的详尽回答。
@ΛRYΛN 这不正确。您的代码还在 false、0、"" 和其他一些事情上做了一些事情。

【解决方案8】：

javascript:void(0) 的使用意味着 HTML 的作者滥用了锚元素来代替按钮元素。

锚标签经常被滥用与 onclick 事件创建通过将 href 设置为“#”或“javascript:void(0)”来创建伪按钮防止页面刷新。这些值会导致意外复制/拖动链接时的行为，在新的链接中打开链接选项卡/窗口、书签以及 JavaScript 仍在下载时，错误输出，或被禁用。这也传达了不正确的语义辅助技术（例如屏幕阅读器）。在这些情况下，它是建议改用<button>。一般来说，你应该只使用使用正确 URL 进行导航的锚点。

来源：MDN's <a> Page。

【讨论】：

+1 用于在一个老问题上提出语义 html... 链接到位，按钮做事 - 如果我们不希望它看起来像一个按钮，我们应该清除样式。
最大的例外是图像映射，它可能需要执行 JavaScript；由于它不是一个按钮，它是一个具有多边形边界的链接，这是“唯一”的方式。

【解决方案9】：

Web 开发人员使用javascript:void(0)，因为它是防止a 标签默认行为的最简单方法。 void(*anything*) 返回 undefined，这是一个假值。并且返回一个虚假值就像 onclick 事件中的 return false a 标记阻止其默认行为。

所以我认为javascript:void(0)是防止a标签默认行为的最简单方法。

【讨论】：

【解决方案10】：

void 是一个运算符，用于返回 undefined 值，因此浏览器将无法加载新页面。

Web 浏览器会尝试获取任何用作 URL 的内容并加载它，除非它是返回 null 的 JavaScript 函数。例如，如果我们点击这样的链接：

<a href="javascript: alert('Hello World')">Click Me</a>

然后会在不加载新页面的情况下显示警告消息，这是因为alert 是一个返回空值的函数。这意味着当浏览器尝试加载新页面时，它会看到 null 并且没有要加载的内容。

关于 void 运算符需要注意的重要一点是，它需要一个值并且不能单独使用。我们应该这样使用它：

<a href="javascript: void(0)">I am a useless link</a>

【讨论】：

我看到人们使用 javascript:null 而不是 void...但这是个问题。 Chrome null 有效，在 Firefox 中，它尝试加载页面 null。很高兴你更新了。有趣的错误。
我在代码库中发现了一些其他用途，例如 javascript:null 但 javascript:null() 未定义，因此可以使用。
所以基本上它就像jquery的prevendDefault并返回false？

【解决方案11】：

要理解这个概念，首先应该理解 JavaScript 中的 void 运算符。

void 运算符的语法是：void «expr»，它计算 expr 并返回 undefined。

如果将 void 实现为函数，则如下所示：

function myVoid(expr) {
    return undefined;
}

这个 void 运算符有一个重要的用法，就是丢弃表达式的结果。

在某些情况下，与表达式的结果相反，返回 undefined 很重要。然后可以使用 void 来丢弃该结果。一种这样的情况涉及 javascript: URL，应该避免用于链接，但对小书签很有用。当您访问其中一个 URL 时，许多浏览器会用评估 URL“内容”的结果替换当前文档，但前提是结果不是未定义的。因此，如果您想打开一个新窗口而不更改当前显示的内容，您可以执行以下操作：

javascript:void window.open("http://example.com/")

【讨论】：

感谢您准确阐明“无效”的论点是什么！在其他答案中并不清楚，只有“void 需要一个参数”。
好的答案，但有一个细节，无效的实现将类似于：function myVoid(expr) { expr(); return undefined; } 你忘了添加 expr();
@Juanma Menendez：不是真的。 expr 已在调用 myVoid() 时进行评估（该表达式的 result 作为参数传递）
@UdoG 我很好奇，你是怎么认识那个男人的？你能解释一下吗？
@JuanmaMenendez：函数参数中的表达式总是在调用函数本身之前进行评估。抱歉，我手头没有文件可以说明这一点，但请尝试一下：function() { alert("foo"); } 是一个有效的表达式。 void(function() { alert("foo"); })returns undefined 并且不显示警报，而 myVoid(function() { alert("foo"); }) 确实（在您的版本中，不是 Gopal Yadav 的版本）。

【解决方案12】：

链接必须具有要指定的href 目标才能使其成为可用的显示对象。

大多数浏览器不会解析href 元素的href 中的高级JavaScript，例如：

<a href="javascript:var el = document.getElementById('foo');">Get element</a>

由于大多数浏览器中的href 标记不允许空格或将空格转换为%20（空格的十六进制代码），因此 JavaScript 解释器会遇到多个错误。

因此，如果您想使用 <a> 元素的 href 执行内联 JavaScript，您必须首先为 href 指定一个不太复杂（不包含空格）的有效值，然后提供事件属性标签中的 JavaScript，例如 onClick、onMouseOver、onMouseOut 等。

典型的答案是这样做：

<a href="#" onclick="var el = document.getElementById('foo');">Get element</a>

这很好用，但它会使页面滚动到顶部，因为href 中的# 告诉浏览器这样做。

在<a> 元素的href 中放置# 指定根锚点，默认情况下位于页面顶部，但您可以通过在@987654340 中指定name 属性来指定不同的位置@元素。

<a name="middleOfPage"></a>

然后您可以更改 <a> 元素的 href 以跳转到 middleOfPage 并在 onClick 事件中执行 JavaScript：

<a href="#middleOfPage" onclick="var el = document.getElementById('foo');">Get element</a>

很多时候你不希望那个链接跳来跳去，所以你可以做两件事：

<a href="#thisLinkName" name="thisLinkCame" onclick="var elem = document.getElementById('foo');">Get element</a>

现在点击时它不会去任何地方，但它可能会导致页面从当前视口重新居中。

使用<a> 元素的href 使用内联javascript 的最佳方法是JavaScript:void(0);，但不必执行上述任何操作：

<a href="javascript:void(0);" onclick="var el = document.getElementById('foo');">Get element</a>

这告诉浏览器不要去任何地方，而是在href 中执行JavaScript:void(0); 函数，因为它不包含空格，并且不会被解析为 URL。它将由编译器运行。

void 是一个关键字，当提供0 参数时返回undefined，它不再使用任何资源来处理在没有指定0 的情况下会出现的返回值（它更多内存管理/性能友好）。

接下来发生的事情是onClick 被执行。页面没有移动，显示方面没有任何反应。

【讨论】：

+1 用于解释像这样的锚可以处理的所有不同方式。不过我的意见是，<a> 元素必须总是去某个地方；如果它只在页面上执行一些javascript，那么应该使用<button>。使用<button> 更加语义化，并且让你免于关于如何破解锚的href 的整个辩论。 编辑：看起来@Ronnie Royston 下面的回答已经涵盖了这个论点。

【解决方案13】：

void 运算符计算给定的表达式，然后返回 undefined。它避免刷新页面。

【讨论】：

【解决方案14】：

据我所知，void operator 在 JavaScript 中有 3 个常见用途。您所指的<a href="javascript:void(0)"> 是使<a> 标记成为无操作的常用技巧。一些浏览器根据它们是否有 href 来区别对待 <a> 标签，因此这是一种创建带有 href 的链接的方法，它什么都不做。

void 运算符是一个一元运算符，它接受一个参数并返回 undefined。所以var x = void 42; 表示x === undefined。这很有用，因为在strict mode 之外，undefined 实际上是一个有效的变量名。所以一些 JavaScript 开发者使用void 0 而不是undefined。理论上，您也可以使用<a href="javascript:undefined">，它与void(0) 相同。

【讨论】：