详解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跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
学习ExtJS table布局
Oct 08 Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
Aug 05 Javascript
微信小程序分页加载的实例代码
Jul 11 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
原生JS实现贪吃蛇小游戏
Mar 09 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字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
PHP sleep()函数, usleep()函数
2016/08/25 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
原生js实现表格循环滚动
2020/11/24 Javascript
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
最基础的Python的socket编程入门教程
2015/04/23 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
python实现图片压缩代码实例
2019/08/12 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
英国医生在线预约:Top Doctors
2019/10/30 全球购物
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
小学教师的个人自我鉴定
2013/10/26 职场文书
优秀共产党员先进事迹
2014/01/27 职场文书
房屋委托书范本
2014/04/04 职场文书
房产继承公证书
2014/04/09 职场文书
本科生自荐信
2014/06/18 职场文书
旅游活动总结
2014/08/27 职场文书
2016年教师新年寄语
2015/08/18 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python