javascript:void(0) 的常见使用场景

更新时间：2025年05月08日 09:21:52 作者：Komorebi_9999

javascript:void(0) 是一个常见的 JavaScript 伪协议,它主要实现阻止链接的默认行为和占位,本文主要介绍了javascript:void(0) 的常见使用场景,具有一定的参考价值,感兴趣的可以了解一下

基本含义

javascript: 是一种伪协议，它告诉浏览器后面跟随的是一段 JavaScript 代码。void 是 JavaScript 中的一个操作符，void(0) 的作用是对给定的表达式求值，然后返回 undefined。所以 javascript:void(0) 本质上就是执行一段 JavaScript 代码，其返回值为 undefined。

常见使用场景

1. 阻止链接默认行为

在 HTML 的 <a> 标签中，当你不想让链接跳转到指定的 href 地址，同时又想在点击链接时执行一些 JavaScript 代码，就可以使用 javascript:void(0)。示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  onclick="alert('点击了链接')">点击我</a>
</body>

</html>

在这个例子中，点击链接不会进行页面跳转，而是触发 onclick 事件，弹出一个提示框。

2. 占位用途

在一些情况下，你可能还没有确定链接的具体跳转地址或者操作逻辑，但又需要一个链接元素，此时可以先使用 javascript:void(0) 作为 href 的值。示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow" >待实现的链接</a>
</body>

</html>

替代方案

在现代的前端开发中，更推荐使用事件监听器来阻止链接的默认行为，而不是使用 javascript:void(0)。示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a id="myLink" href="#" rel="external nofollow" >点击我</a>
    <script>
        const link = document.getElementById('myLink');
        link.addEventListener('click', function (event) {
            event.preventDefault();
            alert('点击了链接');
        });
    </script>
</body>

</html>

使用 event.preventDefault() 可以更清晰地表达阻止默认行为的意图，并且使 HTML 和 JavaScript 代码分离，提高代码的可维护性。

到此这篇关于javascript:void(0) 的常见使用场景的文章就介绍到这了,更多相关javascript:void(0) 使用场景内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

javascript:void(0)

详解基于javascript实现的苹果系统底部菜单
本篇文章主要对基于javascript实现的苹果系统底部菜单进行了详细的分析说明，有助于理解和学习编写苹果系统底部菜单，相信会对大家有所帮助，下面就跟小编一起来看看吧
2016-12-12
JavaScript 动态改变图片大小
本文作者通实际操作，发现可以用Javascript代码简单实现：对于图片大于100 X 100，则将其缩小为 100 X 100，若比这个小，则保持原图大小。
2009-06-06
细说JavaScript中的变量,作用域和垃圾回收
这篇文章主要和大家介绍一下JavaScript中的变量,作用域和垃圾回收的定义与使用，文中的示例代码讲解详细，对我们学习JavaScript有一定的帮助，需要的可以参考一下
2022-11-11
利用原生JS与jQuery实现数字线性变化的动画
最近在工作中遇到一个需要，需要将数字实现递增的动态显示，从网上找了相关的资料发现利用原生JS与jQuery都可以实现，suoyi8下面这篇文章主要给大家介绍了利用原生JS与jQuery实现数字线性变化动画的相关资料，需要的朋友可以参考下。
2017-02-02
JavaScript实现图片轮播特效
这篇文章主要为大家详细介绍了JavaScript实现图片轮播特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
基于JS实现textarea中获取动态剩余字数的方法
这篇文章主要介绍了基于JS实现textarea中获取动态剩余字数的方法的相关资料，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧
2016-05-05
javascript设计模式 – 抽象工厂模式原理与应用实例分析
这篇文章主要介绍了javascript设计模式 – 抽象工厂模式,结合实例形式分析了javascript抽象工厂模式相关概念、原理、定义、应用场景及操作注意事项,需要的朋友可以参考下
2020-04-04
package.json与package-lock.json的区别及详细解释
不知道大家平时在开发中有没有注意到,你的项目中有两个文件:package.json,package-lock.json,应该很多人平时都不会去关注这两个文件有啥关系吧,这篇文章主要给大家介绍了关于package.json与package-lock.json的区别及详细解释,需要的朋友可以参考下
2022-08-08
JS自定义滚动条效果简单实现代码
这篇文章主要为大家详细介绍了JS自定义滚动条效果的简单实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
JavaScript将数组转换成CSV格式的方法
这篇文章主要介绍了JavaScript将数组转换成CSV格式的方法,实例分析了javascript使用valueOf方法将数组值转换为csv格式字符串的技巧,非常具有实用价值,需要的朋友可以参考下
2015-03-03