理解 javascript:void 语句

Posted 2023-03-13 奋飛

原文地址：https://dev.to/codeofrelevancy/understanding-the-javascriptvoid0-statement-2dna

你可能会遇到包含使用 href="javascript:void(0);" 的 <a> 元素。 当将表达式插入网页可能会导致不良副作用时，通常会使用 javascript void。

其可以有效地消除这些负面结果，因为其返回未定义的原始值。

javascript:void(0) 的一个常见用例是超链接。当需要在链接中调用 JavaScript 时，单击该链接通常会导致浏览器加载新页面或刷新当前页面或丢失当前滚动位置。但是，如果已将一些 JavaScript 附加到链接，您可能不希望出现此行为。

javascript:

javascript：是一个伪URL。一种将 JavaScript 代码直接嵌入 html 文档的方法。它可以用作超链接的 href 属性的值或用作事件处理程序（如 onclick）的值。

例如，如果有一个链接需要在单击时执行特定的 JavaScript 功能，而不是导航到不同的页面，您可以使用javascript:

<a href="javascript:myFunction()">Click here</a>

当用户点击链接时，JavaScript 函数 myFunction() 将被执行，页面不会离开。

<a href="javascript:console.log('Code of Relevancy');">Click me</a>

请务必注意，此方法可能存在安全风险，因为它允许在用户计算机上执行潜在的恶意代码，因此应谨慎使用。

void(0)

void 运算符是 JavaScript 中一个很有价值的工具，它计算表达式并返回未定义的值。它经常用于通过使用 void(0) 或 void 0 来简单地获取 undefined 原始值。但是，值得注意的是，在大多数情况下，全局变量 undefined 可以用作 void 运算符的替代，前提是它没有被重新分配给一个非默认值。

示例

<a href="JavaScript:void(0)">Click me, nothing will happen</a>

此锚标记指定带有 javascript:void(0) URL 的超链接。点击时执行 JavaScript 函数 void，返回 undefined，对页面没有影响。使用 javascript:void(0) 作为 href 值的目的是防止页面在点击链接时刷新和更改 URL。它通常在需要链接但不需要执行任何操作时使用。

<a href="#">Go to Top</a>

<a href="#section2">Go to Section 2</a>

此锚标记指定一个 URL 为 # 的超链接。 # 符号经常被用作占位符 URL，点击链接跳转到页面顶部。它还用于在同一页面内创建内部链接，允许用户跳转到页面内的特定部分。

https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-fragid

总结

javascript:void(0) 在需要链接但不需要操作时用作占位符 URL，而 # 用作占位符 URL 以跳转到页面顶部或在同一页面内创建内部链接。