href=”javascript:void(0);
href=”javascript:void(0);”这个的含义是,让超链接去执行一个js函数,而不是去跳转到一个地址,而void(0)表示一个空的方法,也就是不执行js函数。
为什么要使用href=”javascript:void(0);”
javascript:是伪协议,表示url的内容通过javascript执行。void(0)表示不作任何操作,这样会防止链接跳转到其他页面。这么做往往是为了保留链接的样式,但不让链接执行实际操作,
<a href="javascript:void(0)" onClick="window.open()"> 点击链接后,页面不动,只打开链接
<a href="#" onclick="javascript:return false;"> 作用一样,但不同浏览器会有差异。
https://www.cnblogs.com/cyjy/p/6182587.html
------------------------------分割线--------------------------------------
修正一个说法上的bug吧。对于IE6来说,点击后gif暂停bug仅仅发生在“
javascript:伪协议未加分号”的情形下。
给<a>标签增加href属性,就意味着以下事情:
- :link选择器可以选择到它
- 这个a标签可以获得焦点(可以通过
tab按键访问到) - 在浏览器的默认样式表中,有href属性的
<a>标签才有cursor:pointer的效果(尤其是在低版本的IE上)。
绑定了onclick事件的<a>标签,尤其是它的作用是ajax请求时,基本上我们就用不上这个标签的默认行为,也连接不到的实际页面,一般而言也会在CSS里给予了这个元素的cursor等样式。这时候还要加上href属性,是为了:
- 让
<a>够响应键盘事件并获得焦点(从而屏幕阅读器能够读出背后的内容,增强可访问性) - 优雅降级,在网络连接很差,还没有加载到CSS的时候,
<a>依然有手型与正常的link样式。
给<a>标签以href属性,并不连接到实际的页面的方案有:
<a href="#"></a><a href="#nogo"></a><a href="##"></a><a href="###"></a><a href="javascript:void(0);"></a><a href="javascript:void(0)"></a><a href="javascript:;"></a><a href="javascript:"></a>
他们的体验有细微的差别。
- 1,点击这个链接后,会让页面跳到头部,window.location.href末尾增加#(若window.location.href末尾没有#),除非在js里面捕获onclick事件并阻止默认事件。
- 2有了初步的语义。但是,如果页面里面有id为nogo的元素,点击这个链接后,锚点机制会作用,页面贴齐这个元素上缘。更详细的,详见张鑫旭的《URL锚点HTML定位技术机制、应用与问题》
- 3在chrome中不再默认跳转到页面头部,4在IE11中不再跳转到页面头部。见下方测试。
- 5~8作用相同,但使用了javascript伪协议。在IE6下面,未加分号的方案6和方案8被点击后,IE6会使得页面中的gif暂停,并且触发onbeforeunload事件(详情参考这里),IE6认作这个页面有了重定向,并abort之后所有的请求(参考这里)。所以假如你在此之后替换了一个
<img>的src,IE6完全不会完成这个新的请求。
我更倾向于使用方案4。
至于语义上LZ这种<a href="javascript:void(0)">使用方式,这个贴里已经有了足够详细的回答。我再补充一点,这种情形依然可以做到支持无障碍应用,方法请参考《WAI-ARIA无障碍网页应用属性》。
更新,我做了如下的测试:
<p>
<a href="#">#</a>
</p>
<p>
<a href="##">##</a>
</p>
<p>
<a href="###">###</a>
</p>
<p>
<a href="####">####</a>
</p>
<p>
<a href="#####">#####</a>
</p>
<script type="text/javascript">
var n = 0 ;
window.onhashchange = function(){
alert(++n) ;
}
</script>
- 在IE11中,点击###、####和#####时,页面不再跳转到头部
- 在chrome中,点击##、###、####和#####时,页面不再跳转到头部。
- 但是在IE11和chrome中,点击所有的
<a>都会造成地址栏的修改,并触发hashchange事件。
所以之前说的“###不会造成地址栏的改变”是错误的。
没有大规模测试其他的浏览器,这里做初步猜想:###的意义在于,这是字符数最少的,在所有的浏览器中不会导致跳转到页面头部的锚点。
坏处:
1、javascript: 是伪协议,是非标准化的协议
2、不能平稳退化,当用户的浏览器对JS失效或禁用时点击后什么意义都没有
3、大部分搜索引擎不会搜索到它,因为没有内容,从而影响排名 (# 是不是也算上空链?空链对搜索引擎也不友好)
解决方法:
1、将 javascript:、 #、 ### 替换成真实网址,并取消 <a> 的默认点击事件,return false 或event.preventDefault,如果JS失效了该链接虽功能上打了些折扣,但并没有彻底失效,做到了“平稳退化”
如:本网站侧边栏的“邀请回答”的 http://segmentfault.com/q/1010000000339082# 可以替换成真实地址http://segmentfault.com/q/1010000000339082,然后继续它之后的事件
2、将不该是按钮的改成按钮。好多人都在“烂”用 <a>,每个人都想让它去完成 <button> 的事情,可看下这篇文章《你不能创造一个按钮》,讲的有些道理
https://www.cnblogs.com/pp-cat/p/4308736.html
href=”javascript:void(0);的更多相关文章
- html 空链接 href="#"与href="javascript:void(0)"的区别
#包含了一个位置信息 默认的锚是#top 也就是网页的上端 而javascript:void(0) 仅仅表示一个死链接 这就是为什么有的时候页面很长浏览链接明明是#但跳动到了页首 而javascrip ...
- a href=#与 a href=javascript:void(0) 的区别
a href="#"> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP <a href="javascript:void(0)" onCl ...
- <a href=”#”>与 <a href=”javascript:void(0)” 的区别
<a href=”#”>中的“#”其实是锚点的意思,默认为#top,所以当页面比较长的时候,使用这种方式会让页面刷新到页首(页面的最上部) javascript:void(0)其实是一个死 ...
- <a href="javascript:void(0)" onclick="ff()" ></a> 用法解析
javascript:void(0) 仅仅表示一个死链接 如果是个# javascript:void(#),就会出现跳到顶部的情况,搜集了一下解决方法 1:<a href="####& ...
- 转载 a href=#与 a href=javascript:void(0) 的区别
a href="#"> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP <a href="javascript:void(0)" onCl ...
- 我们为什么要使用 href="javascript:void(0)"
做过web前端UI的小伙伴们都知道,有时候我们在网页中会使用一些超级链接,而这些链接不用指向任何地址,只是为了配合javascript的onclick事件而存在的,当我们点击这些链接时(其实也可以看做 ...
- <a href="javascript:void(0);" id='test' onclick="javascript:alert('即将上线,敬请期待!');"><em class="rmwd"></em>征稿平台</a>
<a href="javascript:void(0);" id='test' onclick="javascript:alert('即将上线,敬请期待!');&q ...
- a标签的href="javascript:void(0)"和href="#"的区别
修正一个说法上的bug吧.对于IE6来说,点击后gif暂停bug仅仅发生在“javascript:伪协议未加分号”的情形下. 我再来提供一个视角吧. 给<a>标签增加href属性,就意味着 ...
- a href=#与 a href=javascript:void(0) 的差别
a href="#"> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP <a href="javascript:void(0)" onCl ...
- a标签中的href="#"与href="javascript:void(0)"区别
转自http://blog.csdn.net/fightplane/article/details/5190037 <a href="#"> 点击链接后,页面会向上滚到 ...
随机推荐
- 坚果云Markdown - 文档管理编辑器
坚果云Markdown - 文档管理编辑器 Markdown是什么? Markdown是一种上手简单.应用十分广泛的轻量级标记语法.您可以使用Markdown轻松记录您的灵感.想法.创意.整个记录过程 ...
- javascript学习总结之Object.assign()方法详解
最近再写ES6的文章时候发现自己对Object.assign()方法不太了解,之前也没有接触过所以就就查阅了相关的资料,为了自己以后肯能会用到以及对知识进行巩固,所以在这里记录下自己学习的点点滴滴,毕 ...
- Rust入坑指南:千人千构
坑越来越深了,在坑里的同学让我看到你们的双手! 前面我们聊过了Rust最基本的几种数据类型.不知道你还记不记得,如果不记得可以先复习一下.上一个坑挖好以后,有同学私信我说坑太深了,下来的时候差点崴了脚 ...
- Graylog源码分析
上文主要介绍了Graylog的功能与架构,本篇我们来看看Graylog的源码 一. 项目启动(CmdLineTool) 启动基本做了这几件事:初始化logger,插件加载(这里用到了Java SPI机 ...
- 详细解读 Spring AOP 面向切面编程(二)
本文是<详细解读 Spring AOP 面向切面编程(一)>的续集. 在上篇中,我们从写死代码,到使用代理:从编程式 Spring AOP 到声明式 Spring AOP.一切都朝着简单实 ...
- Andriod一段时间未操作页面,系统自动登出
功能描述: APP在公共的设备上运行,出于安全考虑,当登录的用户在超过一定时间内没有做任何操作, 则系统自动登出,用户如需重新操作APP,则需要重新登录 . 第一步:创建一个BaseActivity ...
- Mac OSX 10.7.3 以上系统安装JDK1.7失败 Java from Oracle requires Mac OS X 10.7.3 or later.
解决办法: 打开JDK dmg安装包,把里面的pkg安装包拖出来然后解包 xar -xf JDK\ 7\ Update\ 40.pkg ./Java 修改Distribution文件找到pm_inst ...
- 设计模式C++描述----11.组合(Composite)模式
一. 举例 这个例子是书上的,假设有一个公司的组结结构如下: 它的结构很像一棵树,其中人力资源部和财务部是没有子结点的,具体公司才有子结点. 而且最关健的是,它的每一层结构很相似. 代码实现如下: / ...
- SQLserver2016对字段是json对象查询
现在2016内置对json对象的查询支持了.正好项目中用到,做个备忘 如果字段内容是: [{"tagid":"100015","orderid&quo ...
- shell 队列实现线程并发控制
需求:并发检测1000台web服务器状态(或者并发为1000台web服务器分发文件等)如何用shell实现? 方案一:(这应该是大多数人都第一时间想到的方法吧) 思路:一个for循环1000次,顺序执 ...