JavaScript void 运算符详解

 更新时间:2025年01月15日 10:48:46   作者:北北~Simple  
JavaScript中的void运算符用于执行一个表达式但不返回任何值,常用于阻止链接的默认行为或在不跳转页面的情况下触发点击事件,本文介绍JavaScript void 运算符相关操作,感兴趣的朋友跟随小编一起看看吧

JavaScript void 运算符

void定义:

void 运算符对给定的表达式进行求值,然后返回undefined。void是一个一元运算符,接受单个操作数,可以是任何类型,返回一个 undefined。

void语法:

void 在表达式的左边,void 右边的表达式可以是带括号形式(例如:void(0)),也可以是不带括号的形式(例如:void 0)。

void作用:

当我们只需要评估一个表达式而不是返回其值时,void关键字的重要性就发挥出来了。这意味着,通过使用它,我们可以阻止浏览器显示表达式执行的结果。

我们在阻止a标签的默认行为时候就使用到void

<a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></a>
<a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
  这个链接点击之后不会做任何事情,如果去掉 void(),
  点击之后整个页面会被替换成一个字符 0。
</a>

立即调用的函数表达式
在使用立即执行的函数表达式时,可以使用void运算符让js引擎吧一个function关键字识别成函数表达式而不是函数声明

有void:

在一些箭头函数中,若此函数没有对应的返回值,可能会造成一些不可预估的问题,安全起见,对没有返回的函数,可以在前面加上void

var fos = () => {
  return void bar()
}
fos()

为什么要使用void

void和undefined有什么区别:
undefined属于基础类型且还是全局类型,全局类型还可以被更改、被赋值。
void属于运算符,运算符只能被求值计算,不能被赋值更改。
所以在安全层面上来说 void比undefined更安全。所以在源码中一般都是使用void xx这种方式来获取undefined,比直接使用undefined来的更加安全可靠。
如:

export default function isUndefined(input) {
    return input === void 0;
}

JavaScript:void(0) 用法及常见问题解析

javascript:void(0); 是一种在JavaScript和网页开发中经常使用的技术,尤其在处理链接的行为时。本文将深入探讨 javascript:void(0); 的用法,以及在使用过程中可能遇到的常见问题和解决方法。

什么是 javascript:void(0);?

javascript:void(0); 是一个JavaScript表达式,用于防止链接在被点击时执行其默认行为(即导航到一个新页面)。void 是一个运算符,用于执行一个表达式但不返回任何值。
为什么使用 javascript:void(0);?

在HTML中,<a> 标签通常用于创建链接。如果不希望点击链接时页面跳转到其他页面或重新加载当前页面,可以使用 javascript:void(0);。这样,链接会保持在当前页面,同时可以通过JavaScript添加其他功能,如触发弹窗、开启模态框等。

使用示例

以下是一个简单的示例,展示如何使用 javascript:void(0); 来防止链接默认行为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript:void(0) 示例</title>
</head>
<body>
    <a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  onclick="alert('Hello, world!')">点击我</a>
    <script>
        // JavaScript 代码可以放在这里
    </script>
</body>
</html>

在这个例子中,点击链接会弹出一个对话框,而不是跳转到另一个页面或重新加载当前页面。

常见问题及解决方法

使用 javascript:void(0); 与 # 的区别

javascript:void(0); 完全阻止链接的默认行为,而 # 会改变URL(添加 # 到URL末尾),可能导致页面滚动到顶部。
在实际应用中,推荐使用 javascript:void(0); 来避免这种行为,尤其是在单页应用(SPA)中,这可以防止不必要的滚动行为和历史记录变动。

无法触发链接的点击事件

如果发现 javascript:void(0); 阻止了链接的点击事件,确保JavaScript事件处理器正确绑定。在现代JavaScript开发中,推荐使用事件监听器来代替 onclick 属性,例如:

<a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  id="myLink">点击我</a>
<script>
    document.getElementById('myLink').addEventListener('click', function() {
        alert('Hello, world!');
    });
</script>

无法通过键盘访问

javascript:void(0); 链接可能会导致无法通过键盘访问,这对于保持网站的无障碍性是一个问题。为了改进无障碍性,确保链接或按钮可以通过键盘(通常是 Tab 键和 Enter 键)访问,并适当使用 role 和 tabindex 属性。

结论

javascript:void(0); 是一个有用的技巧,可以在不跳转页面的情况下触发链接的点击事件。然而,在使用时需要注意提高网站的无障碍性,并确保不影响用户体验。理解 javascript:void(0); 的行为和限制可以帮助开发者更有效地使用这一技术。

到此这篇关于JavaScript void 运算符的文章就介绍到这了,更多相关JavaScript void 运算符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS支持带x身份证号码验证函数

    JS支持带x身份证号码验证函数

    身份证号码验证-支持新的带x身份证
    2008-08-08
  • JavaScript中return false的用法

    JavaScript中return false的用法

    这篇文章主要介绍了JavaScript中return false的用法,在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为,需要的朋友可以参考下
    2015-03-03
  • 详解jQuery事件

    详解jQuery事件

    本文主要介绍了jQuery事件的相关知识。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • js实现星星打分效果的方法

    js实现星星打分效果的方法

    这篇文章主要介绍了js实现星星打分效果的方法,涉及javascript操作页面元素与样式的技巧,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-04-04
  • 有趣的思路~~JS仿 WINXP 注销桌面渐隐效果

    有趣的思路~~JS仿 WINXP 注销桌面渐隐效果

    有趣的思路~~JS仿 WINXP 注销桌面渐隐效果...
    2006-10-10
  • BootStrapTable服务器分页实例解析

    BootStrapTable服务器分页实例解析

    项目中经常会使用到表格,数据量大的时候还需要进行分页,项目设计阶段,我选择了bootstrapTable的js插件,个人觉得这个框架非常好用,支持服务器端分页,此篇主要写的主要是关于服务器分页,需要的朋友可以参考下
    2016-12-12
  • 详解用场景去理解函数柯里化(入门篇)

    详解用场景去理解函数柯里化(入门篇)

    这篇文章主要介绍了用场景去理解函数柯里化(入门篇),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • layui 对table中的数据进行转义的实例

    layui 对table中的数据进行转义的实例

    今天小编就为大家分享一篇layui 对table中的数据进行转义的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • TypeScript Pinia实战分享(Vuex和Pinia对比梳理总结)

    TypeScript Pinia实战分享(Vuex和Pinia对比梳理总结)

    这篇文章主要介绍了TypeScript Pinia实战分享(Vuex和Pinia对比梳理总结),今天我们再来实战下官方推荐的新的vue状态管理工具Pini,感兴趣的小伙伴可以参考一下
    2022-06-06
  • 原生Javascript插件开发实践

    原生Javascript插件开发实践

    本文主要介绍了原生Javascript插件开发实践思路与代码,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01

最新评论