为何JS操作的href都是javascript:void(0);呢


Posted in Javascript onNovember 12, 2015

一、我是一只小白

为何JS操作的href都是javascript:void(0);呢

下半年浮躁多了,得好好静心学习,告别小白。果断买了几本书:

为何JS操作的href都是javascript:void(0);呢

其中,最先看的是《javascript模式》——不少人认为很shi的一本书。……评价观后感等500字省略……当我看到第二章要结束的时候,又一次看到了“JS中避免使用void”的观点,于是,勾起了身为小白的我困扰已久的一个问题:“既然JS中void不推荐,那为何新浪微博,淘宝之流的首页JS操作的href都是javascript:void(0);呢?”

截图为证!

为何JS操作的href都是javascript:void(0);呢为何JS操作的href都是javascript:void(0);呢

为什么?为什么?都系睇?都系睇?

为何JS操作的href都是javascript:void(0);呢

二、小白的疑惑

百撕不得骑姐啊百撕不得骑姐!

每当看到void,我都想起了N多年前,刚接触程序C语言那会的梦魇,大学唯一挂过科的就是C语言,每次都让我想起那个干巴巴的女讲师。像我这种纯良的好学生,大学之前网吧都没有去过的好同学,也不先具述程序何物有何用,开头就噼里啪啦变量啊,语句啊,XXX的,每天对着黑色的背景的奇怪东西敲a, b, c,那种感觉就像是小时候被大孩子摁在河底呛水喝,云里雾里,水里土里。我想起了小时候看过的一个故事,一个在农村上学的小伙子有幸作为交换生去英国交流学习,住在普通人家里(自然很热情),可是没几天,这位小伙子就被赶走了——原因是:丫的尿尿都不掀马桶盖,家里可是有lady的,太不尊重了!而实际上,这位小伙子第一次见到马桶就是在这户人家,他根本不知道马桶盖是干嘛用的,尿尿的时候要掀起来!

是习惯还是规范,我疑惑了!所谓javascript:void(0)之流的风气我估计就是丫的些C, C++所谓程序背景人带来的,可以追溯到10年之前……

我正好打开着QQ邮箱,于是看了下其href值,为javascript:;

为何JS操作的href都是javascript:void(0);呢

由此可以证明,void(0)确实是多余的,没用的,那为何这么多网站都使用这个呢?每次都要多敲7个多余的字符,这是要闹哪样,莫非绩效是根据HTML的代码量来算的!

为何JS操作的href都是javascript:void(0);呢

百撕不得骑姐啊百撕不得骑姐!

然后,我还有更进一步的疑问:JavaScript中语句最后的分号是可以缺省的,那为何要使用javascript:;而不是javascript:呢?

是习惯还是规范,我疑惑了!

具有代码洁癖的coder们,没事多写一个分号,圣洁的精神世界杯玷污了,怎么能忍受的了呢?这又不是多多语句,不写分号可能会出现意想不到的情况!

像我这种懒到手抽筋,多写一个字符都会难受到满地打滚的人,实在是想不过来啊想不过来!

或许只因我是个小白,巴神的世界我不懂。

三、我是一只小白

我使用href="javascript:"很多年了,一直都是惴惴不安地使用,因为别人都是href="javascript:void(0);",是不是因为href="javascript:"有什么潜在的问题?比方说影响性能?或者让人不能识别马桶盖?

求指点,求吐槽!

做个简单的总结吧:

请参考下面链接中对于void的说明:

针对上面的问题,借用链接中的代码:

<a onclick="fn()">Does not appear as a link, because there's no href</a> 
<a href="javascript:void(0)" onclick="fn()">fn is called</a> 
<a href="javascript:undefined" onclick="fn()">fn is called</a> 
<a href="javascript:" onclick="fn()">fn is called too!</a>

上面三个都是等价的。

另外给大家附上一则网友对javascript:;和javascript:void(0);的解释

大家看JavaScript脚本经常可以看到这样的代码:
〈a href="javascript:doTest2();void(0);"〉here〈/a〉
但这儿的void(0)究竟是何含义呢?
JavaScript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值。

void 操作符用法格式如下:
1. javascript:void (expression)
2. javascript:void expression

expression 是一个要计算的 JavaScript 标准的表达式。表达式外侧的圆括号是可选的,但是写上去是一个好习惯。

你可以使用 void 操作符指定超级链接。表达式会被计算但是不会在当前文档处装入任何内容。

下面的代码创建了一个超级链接,当用户点击以后不会发生任何事。当用户点击链接时,void(0) 计算为 0,但在 JavaScript 上没有任何效果。

void和#的区别

#包含了一个位置信息默认的锚点是#top 也就是网页的上端,而javascript:void(0) 仅仅表示一个死链接。

这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首,而javascript:void(0) 则不是如此所以调用脚本的时候最好用void(0)。

Javascript 相关文章推荐
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
Node.js数据库操作之查询MySQL数据库(二)
Mar 04 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
Node.JS更改Windows注册表Regedit的方法小结
Aug 18 Javascript
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
React-redux实现小案例(todolist)的过程
Sep 29 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
基于jquery实现左右按钮点击的图片切换效果
Jan 27 #Javascript
js图片轮播效果实现代码
Apr 18 #Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 #Javascript
javascript发送短信验证码实现代码
Nov 12 #Javascript
javascript倒计时效果实现
Nov 12 #Javascript
基于jquery步骤进度条源码分享
Nov 12 #Javascript
javascript手风琴下拉菜单实现代码
Nov 12 #Javascript
You might like
PHP 实例化类的一点摘记
2008/03/23 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
PHP生成不重复标识符的方法
2014/11/21 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
php提取微信账单的有效信息
2018/10/01 PHP
Javascript执行效率全面总结
2013/11/04 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
pymysql模块的使用(增删改查)详解
2019/09/09 Python
django ajax发送post请求的两种方法
2020/01/05 Python
如何基于Python按行合并两个txt
2020/11/03 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
HTML5学习笔记之History API
2015/02/26 HTML / CSS
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
4s客服专员岗位职责
2013/12/01 职场文书
银行员工考核评语
2014/12/31 职场文书
Python基础之变量的相关知识总结
2021/06/23 Python
python实现简单的聊天小程序
2021/07/07 Python
nginx配置限速限流基于内置模块
2022/05/02 Servers