脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript:void(0) 使用场景

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

 更新时间：2025年05月08日 09:21:52   作者：Komorebi_9999  
javascript:void(0) 是一个常见的 JavaScript 伪协议,它主要实现阻止链接的默认行为和占位,本文主要介绍了javascript:void(0) 的常见使用场景,具有一定的参考价值,感兴趣的可以了解一下

javascript:void(0) 是一个常见的 JavaScript 伪协议，下面从几个方面详细解释其含义和用途。

基本含义

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) 使用场景内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • js中addEventListener()与removeEventListener()用法案例分析

    js中addEventListener()与removeEventListener()用法案例分析

    这篇文章主要介绍了js中addEventListener()与removeEventListener()用法,结合实例形式分析了js中addEventListener()与removeEventListener()基本功能、用法与操作注意事项,需要的朋友可以参考下
    2020-03-03
  • js实现带积分弹球小游戏

    js实现带积分弹球小游戏

    这篇文章主要为大家详细介绍了js实现带积分弹球小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-07-07
  • JavaScript树形数据结构处理

    JavaScript树形数据结构处理

    这篇文章主要介绍了JavaScript树形数据结构处理，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下
    2022-07-07
  • 理解javascript中的严格模式

    理解javascript中的严格模式

    这篇文章主要帮助大家理解javascript中的严格模式，何为严格模式，如何启用严格模式，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • JS 设计模式之：单例模式定义与实现方法浅析

    JS 设计模式之：单例模式定义与实现方法浅析

    这篇文章主要介绍了JS 设计模式之：单例模式,结合实例形式分析了JS 单例模式原理、定义、实现方法与相关注意事项,需要的朋友可以参考下
    2020-05-05
  • js中数组排序sort方法的原理分析

    js中数组排序sort方法的原理分析

    这篇文章主要介绍了js中数组排序sort方法的原理,以实例形式分析了sort排序方法的运行机制,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-11-11
  • 分离式javascript取当前element值的代码

    分离式javascript取当前element值的代码

    比较不错的分离式js代码，获取element的值，大家注意下，运行后的效果是32之类的值，其实主要是没有强制转换成数字，所以大家可以加上
    2008-05-05
  • IE中createElement需要注意的一个问题

    IE中createElement需要注意的一个问题

    最近有读者求助，说在iframe中，创建一个元素，然后添加到父页面中在ie6，ie7中行不通，而firefox和IE8可以。
    2010-07-07
  • Code Review 方法论与实践总结梳理

    Code Review 方法论与实践总结梳理

    这篇文章主要为大家介绍了Code Review 方法论与实践总结梳理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-02-02
  • JS中的构造函数详细解析

    JS中的构造函数详细解析

    本篇文章主要是对JS中的构造函数进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-03-03

最新评论