请慎用javascript:void(0)，尤其是在坑爹的IE6中

原文链接

你想要一个A标签，但是其href属性并不是你想要的，也就是说其实你只想要个样式而已。于是你将href置空，或者指向“#”，但是很快你发现，这样做是有些小问题的，于是你又查阅资料，终于邂逅了javascript:void(0)。

 

你以为终于万事大吉，可以顺利解决问题，却在上线前的测试中郁闷地发现，我勒个去，竟然在行将就木的IE6中不好使！

 

好吧，你再接再厉又去google，终于找到了此文

 

在下尽量剥丝抽茧，还原事情的真相，希望你不再受其困扰。

 

1. 同一个“梦想”

把a标签的href属性设为“javascript:void(0);”的开发人员，基本上都是想既拥有a标签的样式，又实现了类似button的功能。

 

2. 陈旧的“事实”

    相信你很讨厌IE6，至少你不喜欢它，我反正是很讨厌它的，因为bug、漏洞一大堆，而且对样式、JS的支持都和新版的IE及市面上流行的浏览器有差异。

    然而即便是IE9都出来了，总是有人还在使用IE6，数量还不少…

IE6在执行javascript伪协议时，运行 void(0) 时会误认为即将跳到新页面，于是清空掉所有的异步的JS加载、Ajax请求、CGI访问、跳转以及表单的提交等操作。这个错误不是必现的，当onclick操作进行的足够快，错误便显现不出来。

 

3. 错误是怎样诞生的

示例：

1. <a href="javascript:void(0)" onclick="Go()">百度</a>
2. function Go(){
3.     window.location.href = 'http://baidu.com'; // 还有其他一些改法
4. }

 

在IE6里面是不会成功跳转到百度的，浏览器的执行过程如下

 

鼠标单击 — 执行onclick对应的JS — 执行伪协议的JS代码void(0)

                |                               | 中断

                 \------------------------------|-------------------跳到百度

 

4. 好吧，其实解决起来也不难

方法甲：改动href的值

    让href指向的东东不具有中断其他浏览器行为的功能，可以将href设置成不存在的锚定（我用的是”###”）。

 

方法乙：改动onclick指向的JS

    在onclick指向的JS中，如果return false的话，会终止取消浏览器的默认操作（浏览器不去管href里到底是什么东东了）。

    写法就可以自由发挥了，总之是返回false就对了，例如可以onclick = "return Go()"，在Go里面返回false。Note:如果是用JQuery绑定的click操作，return false除了阻止浏览器默认操作外，还会阻止事件冒泡[f1] 。

 

方法丙：干脆用div或别的标签来实现

         如果你实在是闲的要命，你可以使用这个办法试一下。

 

方法甲示例：

1. <a href="###" onclick="Go()">百度</a>

嘿嘿，还是这个最简单

 

5. 一些其他的知识

A. 地址栏支持JS代码？

的确，其实是javascript伪协议，你可以在地址栏里面直接输入任何合法的JS代码

javascript:<JS代码>

    浏览器会把最后一条javascript语句的字符串值作为新文档的内容显示到页面上。

javascript:var t = new Date(); "<h1>时间: </h1>" + t;

 

B. 只有A链接onclick指向的JS return false会阻止浏览器的默认行为么？

非也，所有的事件响应函数均如此。

 

C. 所谓伪协议

“伪协议：是人们对非标准化通信机制的统称。（真协议特指那些用来在因特网上的两台计算机之间传输各种数据包的标准化通信机制，如：http://、ftp://等）”

可以通过修改注册表指定解析为协议的exe程序，例。

 

D. 事件冒泡

    嵌套的dom元素会收到同一个事件，有时候你很讨厌这样，有时候你又希望这样。有关事件冒泡的更多信息，请自行google。

 [f1] JQuery绑定事件处理函数的源码

1. handle : function(event)
   
2. 
   
3. {
   
4.     //other code......
   
5.     if (ret === false) 
   
6.     {
   
7.         event.preventDefault(); // 阻止默认行为
   
8.         event.stopPropagation();// 阻止冒泡
   
9.     }
   
10.     //other code......
    
11. }