javascript:void()函数方法的解释
void 这个术语在编程中使用时,指的是“无”的返回 – 可以说是“空值”。当函数为空时,意味着该函数不返回任何内容。这类似于 JavaScript 中undefined
显式返回的函数,如下所示:
function und() {
return undefined
}
und()
或隐含地,像这样:
function und() {
}
und()
无论上述函数中的表达式和语句如何,都没有返回结果。
那么,什么是 javascript:void(0) 呢?
如果我们把它分开,我们有javascript:
和void(0)
。让我们更详细地看一下每个部分。
javascript:
这称为伪 URL。当浏览器接收到此值作为href锚标记上的值时,它会解释冒号 (:) 后面的 JS 代码,而不是将该值视为引用路径。
例如:
<a href="javascript:console.log('javascript');alert('javascript')">Link</a>
单击“链接”时,结果如下:
如上所示,浏览器不会将其href视为引用路径。相反,它将其视为一些 JavaScript 代码,以“javascript:
”开头并以分号分隔。
void(0)
void
运算符计算给定的表达式并返回undefined
。
例如:
const result = void(1 + 1);
console.log(result);
// undefined
1 + 1
被评估但undefined
被返回。为了证实这一点,这是另一个例子:
<body>
<h1>Heading</h1>
<script>
void(document.body.style.backgroundColor = 'red',
document.body.style.color = 'white'
)
</script>
</body>
上面代码的结果是:
这是另一个例子:
console.log(void(0) === undefined)
// true
结合javascript:
和void(0)
有时,你不希望链接导航到另一个页面或重新加载页面。使用javascript:
,你可以运行不会更改当前页面的代码。
这与void(0)
一起使用,什么都不做- 不要重新加载,不要导航,不要运行任何代码。
例如:
<a href="javascript:void(0)">Link</a>
“链接”一词被浏览器视为链接。例如,它是可聚焦的,但它不会导航到新页面。
0
是一个传递给void
的参数,它什么都不做,什么都不返回。
JavaScript 代码(如上所示)也可以作为参数传递给void
方法。这使得链接元素运行一些代码,但它维护相同的页面。
例如:
<a id='link' href="javascript:void(
document.querySelector('#link').style.color = 'green'
)">Link</a>
单击按钮时,结果如下:
使用void
,它告诉浏览器不要返回任何东西(或 return undefined)。
带有javascript:void(0)
引用的链接的另一个用例是,有时链接可能会在后台运行一些 JavaScript 代码,而导航可能是不必要的。在这种情况下,表达式将用作传递给void
的参数。
结论
在这篇简化的文章中,我们了解了void
运算符是什么、它是如何工作的,以及它如何与链接属性的javascript:
伪 URL一起使用href。
这可确保页面在单击时不会导航到另一个页面或重新加载当前页面。
您可能对以下文章也感兴趣
- jQuery实例:单击按钮后使用val()方法更改按钮文字
- jQuery find(“#id”)与find(“.class”)实例分析与比较
- JQuery使用append()函数动态创建和应用CSS样式