协慌网

登录 贡献 社区

“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:伪 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="#" ]。

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

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

(*:在网站创作中,无论如何。显然它们对于 bookmarklet 非常有用. 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>