详解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 相关文章推荐
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
jquery三个关闭弹出层的小示例
Nov 05 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
Jan 23 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
vue-cli3跨域配置的简单方法
Sep 06 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 Javascript
JS script脚本中async和defer区别详解
Jun 24 Javascript
vue实现同时设置多个倒计时
May 20 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/03 冲泡冲煮
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
JS实现时间校验的代码
2020/05/25 Javascript
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
python网络编程之五子棋游戏
2020/05/14 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
法制宣传口号
2014/06/16 职场文书
小学新教师个人总结
2015/02/05 职场文书
北京天坛导游词
2015/02/12 职场文书
个人收入证明范本
2015/06/12 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS