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


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

我见过这样的 href很多次,但我不知道究竟是什么意思。


1030
2017-08-18 05:20


起源


javascript: 是众多URI方案之一: en.wikipedia.org/wiki/URI_scheme, 喜欢 data:。 - Ciro Santilli 新疆改造中心 六四事件 法轮功
你可以使用 href="javascript:" 出于同样的目的。正如答案所述 这个问题, void(0) part最初是针对早期版本的浏览器而设的 javascript: URI处理是不同的。但现在我甚至找不到速记不起作用的版本,至少IE7正确处理这个问题。 - user
我也看过href =“javascript://”,这样更好吗? - StarWars
href =“javascript://”对我不起作用void(0)完美无缺。 - sandip
这个重复 stackoverflow.com/questions/38655639/javascript-if-x-void-0 - Ondra Žižka


答案:


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

void 通常仅使用运算符   获得 undefined 原始   价值,通常使用“void(0)“ (哪一个   相当于“void 0“)。在这些   案例,全局变量 undefined   可以代替使用(假设它有   未分配到非默认值   值)。

这里提供一个解释: void 操作者

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


794
2017-08-18 05:23



当href被赋予“未定义的原始值”时,它意味着什么? - omg
“通常是javascript:url会将浏览器重定向到评估该javascript结果的纯文本版本。”你能在这里做个例子吗?我从来没有见过这样的用法。 - omg
凤凰谈论的一个例子是<a href="javascript: dosomething();">现在就做! </A>。如果dosomething返回false,则单击该链接将导致浏览器退出页面并显示“false”。但是...... <a href="javascript: dosomething(); void(0)">现在就做! </a>避免了这个问题。继续粘贴javascript:1 + 1;进入你的浏览器地址栏。浏览器应显示“2” - Breton
因为void是一元运算符。虚空不是一个价值,也不是一个功能。它需要一个值来操作它的右边,否则会抛出一个错误。 - Breton
尝试查看错误控制台?它定义会引发语法错误。这是无效的JavaScript。 Douglas crockford建议远离虚空,因为一元的操作员/功能/价值混乱太昂贵而无法应对。 - Breton


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

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

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

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

否则,如果链接仅指向某个脚本,则它实际上不是链接,不应该这样标记。通常的方法是添加 onclick 到了 <span><div>或者 <a> 没有 href 并以某种方式设计它,以便清楚地点击它。这就是StackOverflow [在撰写本文时所做的;现在它使用 href="#"]。

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

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

(*:无论如何,在网站创作中。显然它们对于bookmarklet非常有用。 javascript: 伪URL是一种概念上的怪异:一种定位器,它不指向某个位置,而是在当前位置内调用活动代码。它们为浏览器和Web应用程序带来了巨大的安全问题,而且绝不应该由Netscape发明。)


369
2017-08-18 10:50



除了@bobince的优秀帖子:我几个月前做过一些关于跨浏览器键盘导航的研究 hrefs,包括怪癖和副作用;你们中的一些人可能觉得它很有用: jakub-g.github.com/accessibility/onclick - jakub.g
@ThinkBonobo:自2009年以来,SO已经发生了变化!更新。 - bobince
这是一个意见,不回答这个问题。 void(0) 在许多情况下需要; “#”是一个黑客,它带来了一大堆问题(它在我写的应用程序中不起作用,这使我进入了这个页面)。 - felwithe
我同意@feltwithe。为什么要强迫别人“以特定的方式做事”?在15年的编程中,我还没有看到“它应该始终以这种方式完成”的座右铭并不会导致人们对自己的制作造成混乱 - Steven de Salas
从UX角度来看,使用fragment-id是一个坏主意,因为它会导致文档跳转到页面顶部,除非 preventDefault 用来。如果将锚用作表单上的按钮,请不要这样做。 - Josh Habdas


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

你应该只是 return false 在里面 onclick 事件,像这样:

<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>

102
2017-08-18 05:21



no no - return false将停止默认行为,因此#将永远不会出现 - Magnar
javascript:url协议是事实上的标准,而不是真正的标准。所以href =“#”onclick =“return false;”是标准兼容而href =“javascript:void(0)”不是,因为没有官方标准指定应该做什么。 - Breton
最重要的是,道格拉斯克罗克福德不喜欢虚空,所以jslint会抱怨它。基本上,由于虚空是一个操作者,而不是一个价值,它就像地狱一样令人困惑,并产生许多问题,比如这个问题。最好完全避免它。哈哈。 - Breton
布兰登:见布兰顿的回应。我推荐的方式是最受支持的,正如我在帖子的第二部分所说,在“适当的”网站中,你甚至不会使用'#',因为你将提供后备系统来处理缺乏JavaScript的。 - Noon Silk
+1包含 太棒了 例。即使你没有静态HTML后备用于你在JavaScript中所做的事情,你总是可以做类似的事情 <a href="enableJavaScriptToSeeMyCompletelyAwesomeSite.html" onclick="completelyAwesome();return false;">。 - Grant Wagner


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

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

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


57
2017-08-18 08:25



@Salvin:The 滚动到顶级页 可以通过返回来抑制行为 false 到事件处理程序: onclick="doSomething();return false;", 或者如果 doSomething() 回报 false, 您可以使用 onclick="return doSomething();"。 - Grant Wagner
@GrantWagner - 或者,5年后, e.preventDefault()。 - trysis
您可能想要编辑/删除此答案 "#" 不 不 返回false时滚动到顶部。 - Navin
@Navin你是对的,但现在这已经过时了。 trysis的评论现在被认为是正确的方式。 - Tim Seguine


它非常流行地用于向HTML链接添加JavaScript函数,例如: [Print] 您在许多网页上看到的链接。代码如下:

<a href="javascript:void(0)" onclick="call print function">Print</a>

我们为什么需要 'href' 而 'onclick' 单独可以完成工作吗?因为如果我们省略了 'href',当用户将鼠标悬停在文本“打印”上时,光标将变为“I”。有 'href' 允许光标显示为好像是超链接:指针。

PS:有两种方法:1。 href="javascript:void(0);" 和2。 href="#"  - 两者都有相同的效果。但是第一个要求在Web浏览器中打开JavaScript,而第二个则不需要。所以第二个似乎更兼容。


46
2018-01-14 07:17



如果关闭javascript,它也没有任何用处。 - Jasen
你不需要 href 得到指向手形光标;只需要一点CSS。 - John Montgomery


你应该总是有一个href 一个 标签。调用返回'undefined'的JavaScript函数就可以了。所以将链接到'#'。

没有href的Internet Explorer 6中的锚标签没有得到 a:hover 风格适用。

是的,它是可怕的,是一种针对人类的轻微犯罪,但一般来说,Internet Explorer 6也是如此。

我希望这有帮助。

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


36
2017-08-18 05:25





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


13
2017-07-24 13:47





void 是一个用于返回a的运算符 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>

13
2018-03-15 07:34



我见过人们使用javascript:null而不是void ...但这是一个问题。 Chrome null有效,在Firefox中,它会尝试将页面加载为null。很高兴你更新。有趣的bug。 - Gavin Pickin
我在代码库中找到了一些其他的用法,比如javascript:null但是javascript:null()是未定义的,所以这很有用。 - Gavin Pickin
所以基本上它就像jquery的prevendDefault并返回false? - Robert Rocha


值得一提的是,在检查undefined时有时会看到void 0,因为它需要更少的字符。

例如:

something === undefined

something === void 0

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


12
2017-11-10 06:32



一个值得注意的例子是TypeScript(实例),它编译默认参数值以进行检查 void 0。当许多方法使用默认参数值时,3个字符的差异很快就会增加。 - John Weisz