详解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 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
jQuery总体架构的理解分析
Mar 07 Javascript
JavaScript中this的使用详解
Nov 08 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
Vue.directive使用注意(小结)
Aug 31 Javascript
前端js中的事件循环eventloop机制详解
May 15 Javascript
微信小程序实现购物车功能
Nov 18 Javascript
JavaScript实现雪花飘落效果
Dec 27 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
PHP之密码加密的几种方式
2015/07/29 PHP
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python简单的制作图片验证码实例
2017/05/31 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
python DataFrame 取差集实例
2019/01/30 Python
Python类的继承用法示例
2019/01/31 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
python requests使用socks5的例子
2019/07/25 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
苹果音乐订阅:Apple Music
2018/08/02 全球购物
园林技术个人的自我评价
2014/01/08 职场文书
花坛标语大全
2014/06/30 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书