沃梦达 / IT编程 / 前端开发 / 正文

javascript:void(0)的真正含义实例分析

在网页编程中,很多人都会用到 javascript:void(0) 这个常用的代码,这个代码经常用来作为 a 标签的 href 属性的值。那么这个字符串的含义究竟是什么呢?下面详细讲解一下。

JavaScript:void(0)的真正含义实例分析

在网页编程中,很多人都会用到 javascript:void(0) 这个常用的代码,这个代码经常用来作为 a 标签的 href 属性的值。那么这个字符串的含义究竟是什么呢?下面详细讲解一下。

JavaScript:void(0) 的含义

其实,javascript:void(0) 就是一句标准的 JavaScript 代码。其中 void 是 JavaScript 中的一个操作符,用来对一个表达式进行求值,结果总是返回 undefined,同时也可以用来防止页面跳转。而括号中的 0 则是一个数字字面量,没有实际作用。

示例1

下面我们来看一个常见的例子:

<a href="javascript:void(0)">点击我</a>

上面代码给一个 a 标签添加了 javascript:void(0) 作为链接地址,点击这个链接不会有任何跳转,也不会有任何反应。这是因为 javascript:void(0) 表示执行一段 JavaScript 代码,而这段代码是一个空语句。

更进一步地,我们可以在 javascript:void(0) 中添加一些 JavaScript 代码,例如:

<a href="javascript:void(console.log('被点击了'))">点击我</a>

上面代码在 javascript:void() 中添加了 console.log() 语句,并把整个字符串作为 a 标签的 href 属性值,当这个链接被点击时就会打印出一条日志信息。

示例2

除了上述例子,还有一种情况,在表单的 action 属性中我们可以用 javascript:void(0) 来禁止提交表单:

<form action="javascript:void(0)">
  <input type="text" name="username" placeholder="请输入用户名">
  <input type="password" name="password" placeholder="请输入密码">
  <button type="submit">登录</button>
</form>

如上代码,当表单被提交时,会执行一段 JavaScript 代码,这段代码实际上并没有任何效果,表单也就不可能被提交。

综述

通过上面的示例,我们可以理解 javascript:void(0) 的真正含义及使用场景。总结来说,javascript:void(0) 可以用于以下场景:

  • a 标签的 href 属性中,不让链接被点击时跳转到其他页面,或者执行 JavaScript 相关操作。
  • 在表单的 action 属性中,防止表单被提交,或者执行一些 JavaScript 相关操作。

本文标题为:javascript:void(0)的真正含义实例分析