为何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类定义例子
Sep 12 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
Feb 27 Javascript
javascript时间函数基础介绍
Mar 28 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
jQuery自定义插件详解及实例代码
Dec 29 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
2015/03/04 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
Python中join函数简单代码示例
2018/01/09 Python
python编程测试电脑开启最大线程数实例代码
2018/02/09 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
python3注册全局热键的实现
2020/03/22 Python
Python hashlib模块的使用示例
2020/10/09 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
Stuarts London美国/加拿大:世界领先的独立男装零售商之一
2019/03/18 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
师生聚会感言
2014/01/26 职场文书
社区服务活动小结
2014/07/08 职场文书
2016七夕情人节感言
2015/12/09 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB
Python 线程池模块之多线程操作代码
2021/05/20 Python
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python