在网页编程中,很多人都会用到 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)的真正含义实例分析
基础教程推荐
- HTML基础详解(上) 2022-09-21
- Ubuntu20.04安装配置java和tomcat部署静态html网站方法 2023-10-25
- JS(vue iview)分页解决方案 2023-10-08
- Ajax简单的异步交互及Ajax原生编写 2022-12-15
- 用js自动判断浏览器分辨率的代码 2023-11-30
- ajax请求后台接口数据与返回值处理js的实例讲解 2023-02-23
- Jquery Ajax请求文件下载操作失败的原因分析及解决办法 2022-10-17
- 容易遗忘的HTML知识点 2023-10-28
- 巧用ajax请求服务器加载数据列表时提示loading的方法 2023-02-01
- vue 腾讯地图使用 行政区划范围 2023-10-08