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

我见过href很多次,但我不知道这到底是什么意思。

4

14 回答 14

1203

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

void运算符通常仅用于获取原始undefined值,通常使用“<code>void(0)”(相当于“<code>void 0”)。在这些情况下,undefined 可以改用全局变量(假设它没有被分配给非默认值)。

此处提供了解释:voidoperator

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

于 2009-08-18T05:23:10.093 回答
487

除了技术答案,javascript:void意味着作者做错了。

没有充分的理由使用javascript:伪 URL(*)。在实践中,如果有人尝试“书签链接”、“在新选项卡中打开链接”等内容,将会导致混淆或错误。这种情况经常发生,现在人们已经习惯了中间点击新标签:它看起来像一个链接,你想在新标签中阅读它,但结果证明它根本不是真正的链接,并在中键单击时给出不需要的结果,例如空白页或 JS 错误。

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

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

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

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

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

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

于 2009-08-18T10:50:44.923 回答
138

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

您实际上应该只是return falseonclick事件中,如下所示:

<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>
于 2009-08-18T05:21:36.787 回答
92

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

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

为什么我们需要独自一人就能完成工作hrefonclick因为当用户将鼠标悬停在没有 'Print' 的文本上时href,光标将变为插入符号 (ꕯ) 而不是指针 (

于 2014-01-14T07:17:36.963 回答
86

vs的行为有很大的不同。#javascript:void(0);

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

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

于 2009-08-18T08:25:40.740 回答
51

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

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

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

我希望这有帮助。

Internet Explorer 6 实际上是一项重大的反人类罪行。

于 2009-08-18T05:25:24.300 回答
40

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

例如:

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

相比:

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

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

于 2016-11-10T06:32:15.413 回答
29

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

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

来源:MDN 的<a>页面

于 2017-10-04T22:43:54.433 回答
23

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

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

于 2018-08-21T05:13:05.240 回答
21

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>
于 2012-03-15T07:34:17.250 回答
18

要理解这个概念,首先应该理解 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/")
于 2016-08-02T09:16:28.880 回答
16

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

大多数浏览器不会解析元素中的高级 JavaScript href<a>例如:

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

因为href大多数浏览器中的标签不允许空格或将空格转换为%20(空格的 HEX 代码),所以 JavaScript 解释器会遇到多个错误。

因此,如果您想使用<a>元素执行内联 JavaScript,您必须先指定一个不太复杂(不包含空格)href的有效值,然后在事件属性标签中提供 JavaScript,如, ,等.hrefonClickonMouseOveronMouseOut

典型的答案是做这样的事情:

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

这工作正常,但它使页面滚动到顶部,因为#inhref告诉浏览器这样做。

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

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

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

<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>元素使用内联 javascript 的最佳方法hrefJavaScript:void(0);

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

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

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

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

于 2018-04-28T06:12:05.267 回答
15

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

于 2013-07-24T13:47:32.050 回答
7

据我所见,void运算符在 JavaScript 中有 3 种常见用途。您所指的<a href="javascript:void(0)">是使<a>标签成为无操作的常见技巧。<a>一些浏览器根据标签是否有 a 来区别对待标签href,所以这是一种创建一个href不做任何事情的链接的方法。

void运算符是一个一元运算符,它接受一个参数并返回undefined。所以var x = void 42;意思x === undefined。这很有用,因为在严格模式之外,undefined它实际上是一个有效的变量名。所以一些 JavaScript 开发人员使用void 0而不是undefined. 从理论上讲,您也可以这样做<a href="javascript:undefined">,并且与void(0).

于 2021-02-13T00:45:41.097 回答