为何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中的style.display属性操作
Mar 27 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
javascript每日必学之运算符
Feb 16 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
你不知道的 TypeScript 高级类型(小结)
Aug 28 Javascript
js实现滚动条自动滚动
Dec 13 Javascript
基于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
一个简单的域名注册情况查询程序
2006/10/09 PHP
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
php实现socket推送技术的示例
2017/12/20 PHP
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
js微信支付实现代码
2016/12/22 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
python os用法总结
2018/06/08 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
Django 用户认证Auth组件的使用
2020/11/30 Python
美国顶级防滑鞋:Shoes For Crews
2017/03/27 全球购物
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
十佳中学生事迹材料
2014/06/02 职场文书
普通党员整改措施
2014/10/24 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
水知道答案观后感
2015/06/08 职场文书
python基础之爬虫入门
2021/05/10 Python