在网页编程中,很多人都会用到 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)的真正含义实例分析
- vue开发之生命周期 2023-10-08
- 关于javascript:如何从视图中调用组件中的方法? 2022-09-16
- Typescript井字棋的项目实现 2022-10-21
- JavaScript 鼠标事件(MouseEvent)案例讲解 2023-11-30
- openhtmltopdf 学习所遇到的问题 2023-10-26
- 关于vue.js:在Vue项目中用VScode正确设置Eslint Air 2022-09-16
- 用js删除tbody的代码 2023-12-01
- 用vue创建项目 2023-10-08
- Ajax实现异步用户名验证功能 2022-12-28
- 「HTML+CSS」--自定义加载动画【025】 2023-10-27