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属性,并不连接到实际的页面的方案有:
<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>
的事情,可看下这篇文章《你不能创造一个按钮》,讲的有些道理
a标签的href="javascript:void(0)"和href="#"的区别的更多相关文章
- 曾经遇到的坑------href="#"和href="javascript:void(0);"、href="javascript:;"
这个是为了 在点击此链接后回到页首,如果你写href="#"那么点击后会回到页首,这样影响操作. <a href="javascript:void 0" ...
- href="javascript:void(0)" 的用法
href=”javascript:void(0);”这个的含义是,让超链接去执行一个js函数,而不是去跳转到一个地址,而void(0)表示一个空的方法,也就是不执行js函数. 为什么要使用href=” ...
- 为什么要使用href=”javascript:void(0);”
为什么要使用href=”javascript:void(0);” href=”javascript:void(0);”这个的含义是,让超链接去执行一个js函数,而不是去跳转到一个地址,而void( ...
- 一个好玩的小制作,以及在<a/>中的标签href="javascript:;"/href="javascript:void(0);"/href="javascript:"的用法
一:一个小图标的制作 我们在支付宝.微信等某些地方上传文件时会遇到以下的图标,但是这样的图标其实可以用<a/>标签以及css样式完成, 具体代码如下: <!DOCTYPE html& ...
- javascript ie8兼容 a标签href javascript:void(0);
ie8兼容 a标签href javascript:void(0); 尽量不要用javascript:协议做为A的href属性,这样不仅会导致不必要的触发window.onbeforeunload事件;
- a标签中的href="#"与href="javascript:void(0)"区别
转自http://blog.csdn.net/fightplane/article/details/5190037 <a href="#"> 点击链接后,页面会向上滚到 ...
- a标签使用href=”javascript:void(0); 在火狐浏览器跟chrome 不兼容
使用如下方式的链接.在Chrome中点击后行为符合预期,但在IE下会新开标签卡(根据参考资料,Firefox中有相同问题).<a href=”javascript:void(0);” targe ...
- 为了防止页面重新自动加载,可以给a标签设置href="javascript:void(0);"
<a href="javascript:void(0);"></a> <!--按照格式要求,此处的0不能省略!! 虽然省略看上去也没什么影响.但是当发 ...
- href="javascript:;" href="javascript:void(0);" href="#"区别
一.href="javascript:;" 这种用法不正确,这么用的话会出现浏览器访问"javascript:;"这个地址的现象: 二.href="j ...
随机推荐
- 输入A和B,计算并输出A+B
EOF是一个预定义的常量,等于-1. 输入A和B,计算并输出A+B Sample input: 1 5 10 20 Sample output: 6 30 #include <iostr ...
- 关于Eclispse连接Mysql的Jdbc
1.在Eclipse中新建Java工程 2.引入JDBC库(在bulid path 的extenrnal里) 3. 1)导入sql包(import java.sql.*) 2)加载(注册)mysql ...
- HW3.27
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- 使用WIF实现单点登录Part I——Windows Identity Foundation介绍及环境搭建 -摘自网络
上个月有一个星期的时间都在研究asp.net mvc统一身份验证及单点登录的实现.经过了一番的探索,最终决定使用微软的Windows Identity Foundation.但是这东西用的人貌似不多, ...
- POJ 2115 C Looooops(扩展欧几里得)
辗转相除法(欧几里得算法) 时间复杂度:在O(logmax(a, b))以内 int gcd(int a, int b) { if (b == 0) return a; return gcd(b, a ...
- 【转】bootbox自定义dialog、confirm、alert样式,以及基本设置方法setDefaults中可用参数
<html> <head> <meta charset="utf-8"> <meta name="viewport" ...
- IOI1998 hdu1828 poj1177 Picture
写了一发扫描线竟然狂WA不止,hdu死活过不了,poj和当时IOI的数据(还花了我1dsdn积分..)都过了. 然后看到谋篇blog里有评论,把数据拿下来发现WA了. 数据是 20 0 1 11 0 ...
- servlet三大作用域:request,session,application
javaweb开发中Servlet三大域对象的应用(request.session.application(ServletContext)). 1. request request是表示一个请求,只要 ...
- freemarker 数字,字符的操作
1. 数据类型转换: ${xx?string} //字符串 ${xx?number}//整数 ${xx?currency}//小数 ${xx?percent}//百分比 2. 截取字符串长度 有的时候 ...
- Android_消息机制
Android通过Looper.Handler来实现消息循环机制. Android的消息循环是针对线程的,每个线程都可以有自己的消息队列和消息循环. Android系统中的Looper负责管理线程的消 ...