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

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

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

void运算符评估给定的expression式,然后返回undefined

void运算符通常仅用于获取undefined原始值,通常使用“ void(0) ”(相当于“ void 0 ”)。 在这些情况下,可以使用全局variablesundefined (假设它尚未分配给非默认值)。

这里提供了一个解释: void操作符 。

你想用链接的href来做这件事的原因通常是javascript: URL将浏览器redirect到评估JavaScript的纯文本版本。 但是,如果结果undefined ,那么浏览器保持在同一页面上。 void(0)只是一个短而简单的脚本,评估为undefined

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

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

<a href="#">是一个常见的select,可以说是不那么糟糕。 但是,您必须记得从您的onclick事件处理程序return false ,以防止链接被遵循,并滚动到页面的顶部。

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

否则,如果一个链接只指向某个脚本,则不是一个真正的链接,不应该被标记为这样。 通常的方法是将onclick添加到<span><div><a>而不用href ,并以某种方式设置它的样式,使其清晰可以点击它。 这就是StackOverflow [在撰写本文时所做的; 现在它使用href="#" ]。

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

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

(*:在网站创作中,无论如何,显然它们对于bookmarklets来说是非常有用的javascript: pseudo-URLs是一个概念上的奇怪:定位器不是指向一个位置,而是调用当前位置内的活动代码,对于浏览器和webapps都有严重的安全问题,而且不应该被Netscape发明。

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

你实际上应该在onclick事件中return false ,就像这样:

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

通常情况下,如果链接正在做一些'JavaScript-y'的事情,就会使用它。 就像发布一个AJAX表单,或者交换一个图像,或者别的什么。 在这种情况下,你只需要做任何被称为return false函数。

然而,为了使你的网站完全真棒,如果浏览它的人select不运行JavaScript,通常你会包含一个相同的动作链接。

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

“#”与javascript:void的行为有很大的区别

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

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

它非常stream行地用于将js函数添加到html链接,例如:您在许多网页上看到的[Print]链接。 代码就像:

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

为什么需要'href''onclick'可以完成这项工作? 因为如果我们省略'href' ,当用户将鼠标放在文本“打印”上时,光标将变为“I”。 有'href'允许光标显示,就像它是一个超链接:一个指针。

PS:有2种方法:1. href="javascript:void(0);" 和2. href="#" – 都有相同的效果。 但是第一个要求JS在第二个浏览器中打开。 所以第二个似乎更加兼容。

你应该总是对你标签有一个href。 调用返回“undefined”的Javascript函数将会很好。 所以会链接到'#'。

在没有href的IE6锚定标签不会得到a:hover样式应用。

是的,这是可怕的,反对人类的轻微犯罪,但IE6总的来说也是如此。

希望这可以帮助。

编辑:IE6实际上是一个反人类的重大罪行

void运算符评估给定的expression式,然后返回undefined。 它避免了刷新页面。

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

网页浏览器会尝试把URL用作加载它,除非它是一个返回null的javascript函数。 例如,如果我们点击这样的链接:

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

那么将显示一条警报消息而不加载新页面,这是因为alert是一个返回空值的函数。 这意味着,当浏览器试图加载一个新的页面,它看到空,没有什么可以加载

关于void操作符需要注意的一点很重要,它需要一个值,不能被自己使用。 我们应该这样使用它:

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

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

例如:

 something === undefined 

 something === void 0 

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

要理解这个概念,首先应该了解javascript中的void操作符。

void运算符的语法是: void «expr» ,用于计算expr并返回undefined。

如果您将void作为函数实现,则如下所示:

 function myVoid(expr) { return undefined; } 

这个void操作符具有一个重要的用法 – 放弃expression式的结果。

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

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

javascript:void(0)意味着HTML的作者滥用了anchor元素来代替button元素。

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

来源: MDN的<a>页 。

另一个例子是使用javascript.void(0) 。 我不确定这是否是正确的方式,但是做这个工作

 $(document).ready(function() { jQuery(".show-hide-detail").hide(); jQuery(".show-hide-detail:first").show(); jQuery(".show-hide-btn a").click(function() { var thid_data = jQuery(this).attr('data-id'); jQuery(".show-hide-btn a").removeClass('active'); jQuery(this).addClass('active'); if (!jQuery("#" + thid_data).is(":visible")) { jQuery(".show-hide-detail").hide(); jQuery("#" + thid_data).show(); } }); }); 
 <section> <div class="features"> <div class="container"> <h1>Room Dimensions</h1> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor arcu non ligula convallis, vel tincidunt ipsum posuere.sollicitudin. Duis iaculis, arcu ut hendrerit pharetra, elit augue pulvinar magna </p> <div class="dimension-btn show-hide-btn"> <a class="active" data-id="LivingRoom">Living Room</a> <a href="javascript:void(0)" data-id="DiningRoom">Dining Room</a> <a href="javascript:void(0)" data-id="Kitchen">Kitchen</a> <a href="javascript:void(0)" data-id="MasterBedroom">Master Bedroom</a> <a href="javascript:void(0)" data-id="Bedroom2">Bedroom 2</a> <a href="javascript:void(0)" data-id="Bedroom3">Bedroom 3</a> <a href="javascript:void(0)" data-id="Bathroom">Bathroom</a> <a href="javascript:void(0)" data-id="Gym">Gym</a> <a href="javascript:void(0)" data-id="SwimmingPool">Swimming Pool</a> </div> <div class="row"> <div class="LivingRoom Dimension-detail show-hide-detail" id="LivingRoom" style="display: block;"></div> <div class="LivingRoom Dimension-detail show-hide-detail" id="DiningRoom" style="display: none;"></div> <div class="LivingRoom Dimension-detail show-hide-detail" id="Kitchen" style="display: none;"></div> <div class="LivingRoom Dimension-detail show-hide-detail" id="MasterBedroom" style="display: none;"></div> <div class="LivingRoom Dimension-detail show-hide-detail" id="Bedroom2" style="display: none;"></div> <div class="LivingRoom Dimension-detail show-hide-detail" id="Bedroom3" style="display: none;"></div> <div class="LivingRoom Dimension-detail show-hide-detail" id="Bathroom" style="display: none;"></div> <div class="LivingRoom Dimension-detail show-hide-detail" id="SwimmingPool" style="display: none;"></div> </div> </div> </div> </section>