详解javascript void(0)


Posted in Javascript onJuly 13, 2020

void关键字介绍

首先,void关键字是javascript当中非常重要的关键字,该操作符指定要计算或运行一个表达式,但是不返回值。

语法格式:

  1. void func()
  2. void(func())

实例1

当点击超级链接时,什么都不发生

<!-- 1.当用户链接时,void(0)计算为0,用户点击不会发生任何效果 -->
  <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" >单击此处什么都不会发生</a><br>

实例2

执行void操作符当中的代码

<!-- 2.执行 void() 操作符中的代码 -->
  <a href="javascript:void(alert('还真点啊你,真听话!!!哈哈哈!!!'))" rel="external nofollow" >点我弹出警告框!!!</a><br>
  <a href="javascript:void(console.log('还真点啊你,真听话!!!哈哈哈!!!'))" rel="external nofollow" >点我输出到控制台!!!</a><br>

实例3

计算void操作符当中的算术

html:

<button type="button">点我</button>

js:

<script type="text/javascript">
    document.querySelector('button').addEventListener('click', function () {
      var a, b, c, d;
      a = void(b = 2, c = 3);
      console.log('a => ' + a);
      console.log('b => ' + b);
      console.log('c => ' + c);
      console.log('d => ' + d);
    });
  </script>

控制台输出:

详解javascript void(0)

很显然,2赋值给了a, 3赋值给了b, a 和 d一样只是定义了没有赋值,所以为 undefined

#与 javascript:void(0)的区别:

  • #可以跳转到设置了id的目的地
  • javascript:void(0)则停留在原地,一动不动,我们称之为“死链接”

如下面这个例子:

<a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" >你点吧,反正我就是不动,嘿嘿嘿!!!</a><br>
  <a href="#destination" rel="external nofollow" >点我跳转</a>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <h2 id="destination">目的地</h2>
  • 当点击第一个链接时,一动不动
  • 当点击第二个连接时,会跳转到指定id得位置(页面最底部)

以上就是详解javascript void(0)的详细内容,更多关于javascript void(0)的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JAVASCRIPT IE 与 FF中兼容问题小结
Feb 18 Javascript
JavaScript中的集合及效率
Jan 08 Javascript
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 Javascript
详解vue axios二次封装
Jul 22 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 #Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 #Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 #Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 #Javascript
Vue3新特性之在Composition API中使用CSS Modules
Jul 13 #Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 #Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 #Javascript
You might like
跟我学Laravel之请求与输入
2014/10/15 PHP
通过php删除xml文档内容的方法
2015/01/23 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
2013/11/11 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
js匿名函数作为函数参数详解
2016/06/01 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
Vue中CSS动画原理的实现
2019/02/13 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
python模块之time模块(实例讲解)
2017/09/13 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
python__name__原理及用法详解
2019/11/02 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
计算机应用职专应届生求职信
2013/11/12 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
教师节横幅标语
2014/10/08 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
个人贷款收入证明
2014/10/26 职场文书
大一学生个人总结
2015/02/15 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers