a标签的href="javascript:void(0)"和href="#"的区别

修正一个说法上的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属性,并不连接到实际的页面的方案有:

  1. <a href="#"></a>
  2. <a href="#nogo"></a>
  3. <a href="##"></a>
  4. <a href="###"></a>
  5. <a href="javascript:void(0);"></a>
  6. <a href="javascript:void(0)"></a>
  7. <a href="javascript:;"></a>
  8. <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

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
<p> <strong><span style="background-color:#FFFFFF;color:#E53333;font-size:24px;">本页面购买不发书!!!仅为视频课购买!!!</span></strong> </p> <p> <strong><span style="color:#E53333;font-size:18px;">请务必到</span></strong><a href="https://edu.csdn.net/bundled/detail/49?utm_source=banner"><strong><span style="color:#E53333;font-size:18px;">https://edu.csdn.net/bundled/detail/49</span></strong></a><strong><span style="color:#E53333;font-size:18px;">下单购买课+书。</span></strong> </p> <p> <span style="font-size:14px;">本页面,仅为观看视频页面,如需一并购买图书,请</span><span style="font-size:14px;">务必到</span><a href="https://edu.csdn.net/bundled/detail/49?utm_source=banner"><span style="font-size:14px;">https://edu.csdn.net/bundled/detail/49</span></a><span style="font-size:14px;">下单购买课程+图书!!!</span> </p> <p> <br /> </p> <p> <span style="font-size:14px;">疯狂Python精讲课程覆盖《疯狂Python讲义》全书的主体内容。</span> </p> <span style="font-size:14px;">内容包括Python基本数据类型、Python列表、元组和字典、流程控制、函数式编程、面向对象编程、文件读写、异常控制、数据库编程、并发编程与网络编程、数据可视化分析、Python爬虫等。</span><br /> <span style="font-size:14px;"> 全套课程从Python基础开始介绍,逐步步入当前就业热点。将会带着大家从Python基础语法开始学习,为每个知识点都提供对应的代码实操、代码练习,逐步过渡到文件IO、数据库编程、并发编程、网络编程、数据分 析和网络爬虫等内容,本课程会从小案例起,至爬虫、数据分析案例终、以Python知识体系作为内在逻辑,以Python案例作为学习方式,最终达到“知行合一”。</span><br />
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页