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

IT技术 javascript void
2021-01-10 04:27:00
<a href="javascript:void(0)" id="loginlink">login</a>

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

6个回答

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

void操作者经常被用来仅获取undefined原始值,通常使用“ void(0)”(这是相当于“ void 0”)。在这些情况下,undefined 可以改用全局变量(假设它没有被分配给一个非默认值)。

此处提供了解释:voidoperator

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

当 href 被赋予一个“未定义的原始值”是什么意思?
2021-03-10 04:27:00
因为 void 是一元运算符。Void 不是一个值,也不是一个函数。它需要一个值来对其右侧进行操作,否则会引发错误。
2021-03-20 04:27:00
凤凰正在谈论的一个例子是<a href="javascript: dosomething();">立即行动!</a>。如果 dosomething 返回 false,则单击该链接只会导致浏览器退出页面并显示“false”。但是... <a href="javascript: dosomething(); void(0)">立即行动!</a> 避免了这个问题。继续粘贴 javascript: 1+1; 进入浏览器地址栏。浏览器应显示“2”
2021-03-22 04:27:00
尝试查看错误控制台?它肯定会引发语法错误。这是无效的javascript。Douglas Crockford 建议远离 void,因为一元运算符/函数/值混淆的成本太高而无法处理。
2021-03-28 04:27:00
“通常一个 javascript: url 会将浏览器重定向到评估该 javascript 的结果的纯文本版本。”你能在这里举个例子吗?我从来没有见过这样的用法。
2021-04-04 04:27:00

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

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

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

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

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

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

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

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

<a href="#"><span>可访问性原因要好,所以我很高兴 SO 已经改变。但我的偏好仍然是<button type="button">/ <input type="button">+ 样式。
2021-03-12 04:27:00
除了@bobince 的精彩帖子:几个月前,我对hrefs 的跨浏览器键盘导航性进行了一些研究,包括怪癖和副作用;你们中的一些人可能会发现它很有用:jakub-g.github.com/accessibility/onclick
2021-03-18 04:27:00
我同意@feltwithe。为什么要强迫别人“以特定方式做事”?在 15 年的编程生涯中,我还没有看到“应该始终以这种方式完成”的座右铭如何不会导致人们陷入自己的混乱
2021-03-27 04:27:00
这是一个意见,并没有回答问题。void(0)在很多情况下都需要;"#" 是一个 hack,它带来了很多问题(它在我正在编写的应用程序中不起作用,它把我带到了这个页面)。
2021-03-31 04:27:00
从用户体验的角度来看,使用 fragment-id 是一个坏主意,因为它会导致文档跳转到页面顶部,除非preventDefault使用。如果锚被用作表单上的按钮,请不要这样做。
2021-04-02 04:27:00

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

你实际上应该只是return falseonclick事件中,像这样:

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

通常,如果链接正在做一些“JavaScript-y”的事情,就会使用它。比如发布一个 AJAX 表单,或者交换一个图像,或者其他什么。在这种情况下,您只需让任何被调用的函数返回即可false

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

<a href="backup_page_displaying_image.aspx"
   onclick="return coolImageDisplayFunction();">hello</a>
javascript: url 协议是事实上的标准,而不是真正的标准。所以 href="#" onclick="return false;" 是符合标准的,而 href="javascript:void(0)" 不是,因为没有指定应该做什么的官方标准。
2021-03-19 04:27:00
布兰登:见布伦顿的回应。我推荐的方式是最受支持的,正如我在帖子的第二部分所说,在“适当的”站点中,您甚至不会使用“#”,因为您将提供后备系统来处理缺乏javascript。
2021-03-20 04:27:00
no no - return false 将停止默认行为,因此 # 永远不会出现
2021-03-23 04:27:00
+1 用于包含非常棒的示例。即使您在 JavaScript 中执行的操作没有静态 HTML 后备,您也可以始终执行类似<a href="enableJavaScriptToSeeMyCompletelyAwesomeSite.html" onclick="completelyAwesome();return false;">.
2021-03-24 04:27:00
最重要的是,Douglas Crockford 不喜欢 void,所以 jslint 会抱怨它。基本上,由于 void 是一个运算符,而不是一个值,所以它非常令人困惑,并产生了许多诸如此类的问题。最好完全避免它。哈哈。
2021-03-26 04:27:00

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

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

为什么我们需要hrefonclick独处时才能完成工作?因为当用户将鼠标悬停在没有 'Print' 的文本上时href,光标将变为插入符号 (ꕯ) 而不是指针 (👆)。只有hrefa标签才能将验证为超链接。

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

您不需要href获取指向手形光标;只需要一点 CSS。
2021-03-15 04:27:00
为什么不将 JavaScript 函数放在 href 中而不是放在 onclick 中?
2021-03-28 04:27:00
如果 javascript 关闭,也没有任何用处。
2021-04-01 04:27:00
我同意@Sid - 如果您使用它来触发 javascript 函数,那么<a href="javascript:callPrintFunction()">它会更干净(尽管如果它实际上并没有带您去任何地方,它可能应该是一个button而不是一个a锚点)。
2021-04-01 04:27:00
href="#"可能会导致令人讨厌的意外 - 例如中止的 xhr 请求,恰好在单击该链接时被调用。我最近很难调试一个中止 oidc 登录请求的网站,如果用户碰巧位于不是网站根目录的地址中。#href 导致它在 xhr 请求完成之前重新加载地址。
2021-04-05 04:27:00

vs的行为存在巨大差异#javascript:void(0);

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

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

您可能需要编辑/删除这个答案,因为"#"没有当你返回false滚动到顶部。
2021-03-24 04:27:00
@Navin 你是对的,但现在这是一种过时的做法。trysis 的评论现在被认为是正确的方式。
2021-03-27 04:27:00
@GrantWagner - 或者,5 年后,e.preventDefault().
2021-03-28 04:27:00
@trysis 或者,在内联 html 中,使用eventfor eevent变量在内联 htmlonclick处理程序中可用<a href="#" onclick="event.preventDefault();">...</a>
2021-04-01 04:27:00
@Salvin:可以通过返回事件处理程序来抑制滚动到页面顶部的行为falseonclick="doSomething();return false;",或者如果doSomething()返回false,则可以使用onclick="return doSomething();".
2021-04-09 04:27:00