“javascript:void(0)” 是什么意思?

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

我已经看过很多次href ,但是我不知道这到底意味着什么。

答案

void运算符计算给定的表达式,然后返回undefined

void运算符通常仅用于获取undefined原始值,通常使用 “ void(0) ”(等效于 “ void 0 ”)。在这些情况下,可以改用undefined全局变量(假设尚未将其分配给非默认值)。

这里提供了一个解释: void operator

您之所以要使用链接的href这样做是因为,通常,一个javascript: URL 会将浏览器重定向到评估该 JavaScript 的纯文本版本。但是,如果结果undefined ,则浏览器将停留在同一页面上。 void(0)只是一个简短的脚本,其结果为undefined

除了技术答案之外, javascript:void表示作者做错了。

没有充分的理由使用javascript: pseudo-URL(*)。在实践中,如果有人尝试使用 “书签链接”,“在新标签页中打开链接” 等内容,则会引起混乱或错误。现在,这种情况已经发生了很多,人们已经习惯了在新标签上单击中间键:它看起来像一个链接,您想在新标签中阅读它,但事实证明它根本不是真正的链接,并在单击鼠标中键时显示空白页或 JS 错误等不良结果。

<a href="#">是一种常见的替代方法,它的危害可能较小。但是,您必须记住从onclick事件处理程序中return false ,以防止链接被跟踪并向上滚动到页面顶部。

在某些情况下,可能会有一个实际有用的地方指向链接。例如,如果您有一个控件,则可以单击它打开一个先前隐藏的<div id="foo"> ,使用<a href="#foo">链接到它会很有意义。或者,如果有一种非 JavaScript 的方式做同样的事情(例如,“thispage.php?show = foo” 将 foo 开头可见),则可以链接到该脚本。

否则,如果链接仅指向某个脚本,则它实际上不是链接,因此不应进行标记。通常的方法是将onclick添加到没有href<span><div><a>并以某种方式对其进行样式设置,以使您可以单击它。这就是 StackOverflow [在撰写本文时所进行的;现在它使用href="#" ]。

这样做的缺点是您失去了键盘控制权,因为您无法切换到 span / div / bare-a 或使用空格激活它。这是否实际上是不利的,取决于该元素打算采取哪种动作。您可以尝试通过向元素添加tabIndex并监听空格按键来模仿键盘的交互性。但这绝不会 100%重现真实的浏览器行为,尤其是因为不同的浏览器对键盘的响应不同(更不用说非可视浏览器了)。

如果您确实想要一个不是链接但可以通过鼠标或键盘正常激活的元素,则需要一个<button type="button"> (或<input type="button">好,仅适用于简单的文字内容)。您始终可以使用 CSS 对其进行样式更改,因此,如果需要,它看起来更像是链接而不是按钮。但是由于它的行为就像一个按钮,因此您应该真正对其进行标记。

(*:无论如何,在网站创作中。显然,它们对于书签是有用的。javascript javascript:伪 URL 在概念上很奇怪:一个定位器不指向位置,而是在当前位置内调用活动代码。对于浏览器和 Web 应用程序都存在巨大的安全性问题,而 Netscape 绝不应该发明。)

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

实际上,您应该只在onclick事件中return false ,如下所示:

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

通常,如果链接正在执行某些 “JavaScript-y” 操作,则使用它。就像发布 AJAX 表单,交换图片一样。在那种情况下,您只要使正在调用的任何函数都返回 return false

但是,为了使您的网站更加出色,通常,如果浏览该网站的人选择不运行 JavaScript,通常会包含一个执行相同操作的链接。

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

“#” 与 javascript:void 的行为存在巨大差异

“#” 将您滚动到页面的顶部,而 “javascript:void(0);” 才不是。

如果您要编码动态页面,这非常重要。用户不希望仅单击页面上的链接就返回顶部。

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

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

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

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

标签上应始终带有 href。调用返回 “未定义” 的 JavaScript 函数就可以了。因此将链接到 “#”。

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

是的,这是可怕的,轻微的危害人类罪,但 Internet Explorer 6 也是这样。

我希望这有帮助。

Internet Explorer 6 实际上是危害人类的主要罪行。

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

例如:

something === undefined

something === void 0

因此,某些缩小方法会将 undefined 替换为 void 0。

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

除非它是一个返回 null 的 JavaScript 函数,否则 Web 浏览器将尝试使用任何用作 URL 的内容并将其加载。例如,如果我们单击这样的链接:

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

则将显示警报消息而无需加载新页面,这是因为alert是一个返回空值的函数。这意味着,当浏览器尝试加载新页面时,它会显示为 null 并且没有任何内容可加载。

有关 void 运算符的重要注意事项是它需要一个值,并且不能单独使用。我们应该这样使用它:

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

javascript:void(0)意味着 HTML 的作者滥用了 anchor 元素而不是 button 元素。

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

资料来源: MDN 的<a>

要理解这一概念,首先应该了解 JavaScript 中的 void 运算符。

void 运算符的语法为: void «expr» ,它计算 expr 并返回未定义。

如果将 void 实现为函数,则其外观如下:

function myVoid(expr) {
    return undefined;
}

该 void 运算符的一个重要用法是 - 丢弃表达式的结果。

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

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