详解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 相关文章推荐
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 Javascript
jquery validate demo 基础
Oct 29 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
js实现贪吃蛇小游戏
Oct 29 Javascript
原生js实现碰撞检测
Mar 12 Javascript
vue如何使用外部特殊字体的操作
Jul 30 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 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
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
JavaScript实现区块链
2018/03/14 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
puppeteer库入门初探
2019/01/09 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
Python 学习笔记
2008/12/27 Python
python使用Berkeley DB数据库实例
2014/09/26 Python
python selenium firefox使用详解
2019/02/26 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
中国最大的名表商城:万表网
2016/08/29 全球购物
德国著名廉价网上药店:Shop-Apotheke
2017/07/23 全球购物
简短的公司员工自我评价分享
2013/11/13 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
党员作风建设自查报告
2014/10/23 职场文书
学校实习推荐信
2015/03/27 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
法律意见书范文
2015/06/04 职场文书