详解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 相关文章推荐
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
JS代码优化的8点建议
Feb 04 Javascript
vue实现登录拦截
Jun 29 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 Javascript
vue选项卡切换的实现案例
Apr 11 Vue.js
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
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
php模板原理讲解
2013/11/13 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
详解Python的Django框架中的通用视图
2015/05/04 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
Python二叉树定义与遍历方法实例分析
2018/05/25 Python
Flask框架配置与调试操作示例
2018/07/23 Python
python 构造三维全零数组的方法
2018/11/12 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
python cookie反爬处理的实现
2020/11/01 Python
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
高中数学教师求职信
2013/10/30 职场文书
材料采购员岗位职责
2013/12/17 职场文书
感恩节活动方案
2014/01/27 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
六一亲子活动总结
2014/07/01 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
学习保证书100字
2015/02/26 职场文书
2015年宣传工作总结
2015/04/08 职场文书
python pyhs2 的安装操作
2021/04/07 Python
Python基础之hashlib模块详解
2021/05/06 Python
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang