前天一同事遇到個看似很詭異的問題，就是<a href="javascript:void(0);" onclick="window.location.href=url"></a>在IE6下面沒反應，不跳轉到onclik事件中的"window.location.href"。
當時我們在網上找了篇文章很快就解決了，但是文章中沒有說明具體原因在哪裏，只是說在"window.location.href"後面加一個"return false"，當時馬上建了個test.html，試了下確實可以，而且試了之後還發現IE6下是被href="javascript:void(0)"覆蓋了，這問題看上去很簡單，但是爲什麼其他瀏覽器沒有被覆蓋，但對原因到底在哪裏還是一頭霧水。
爲了更深入地去研究<a>中href和和onclik的執行到底是神馬個情況，做了以下試驗，試驗所用的瀏覽器是IE6、7、8和Firefox 8.0.1。爲了視覺上更好的觀察，我們將a的樣式設置爲"display:block; line-height:28px"；爲了觀察href和onclik是否都執行了，我們將<a>屬性設置target="_blank"，因爲它只對a中的href鏈接起作用，即打開href中的鏈接會新增一個窗口；爲了觀察onclik和href的執行順序，我們在爲設置"return false"的onclik事件後面添加"alert('怎麼執行')"，因爲alert會中斷所有瀏覽器線程。以下是試驗代碼：
<html>
<head>
<style>
a{display:block; line-height:28px}
p{margin: 3px 0 12px;}
</style>
</head>
<body>
A: <a href="javascript:void(0);" onclick="window.location.href='http://www.fclub.cn';alert('怎麼執行')" target="_blank">點擊A</a>
<p> 點擊A後，IE中url馬上變成了http://www.fclub.cn，然後彈窗，把彈窗點掉後當前頁面馬上進入了聚尚網首頁，最後再新打開一個地址爲javascript:void(0)的空頁面；在Firefox中，當前頁的url也馬上變成了http://www.fclub.cn，然後彈窗，不同的是，彈窗沒有完全阻斷UI線程，自動跳轉到了聚尚網首頁，並且沒有新打開一個地址爲javascript:void(0)的頁面。</p>
B: <a href="javascript:void(0);" onclick="window.location.href='http://www.fclub.cn';alert('怎麼執行')">點擊B</a>
<p> 點擊B後，在IE6中，瀏覽器任務框中的url馬上變成了http://www.fclub.cn，然後彈窗，點掉彈窗後，當前頁面url變成了javascript:void(0)，進入一個空白頁；IE6以上版本，點擊後url變成了http://www.fclub.cn，然後彈窗，點掉彈窗後進入聚尚網首頁；在Firefox中，表現和A中一樣。</p>
</br>
C: <a href="#" onclick="window.location.href='http://www.fclub.cn';alert('怎麼執行')" target="_blank">點擊C</a>
<p>點擊C後，在IE各版本都是url馬上變成了http://www.fclub.cn，然後彈窗，點掉彈窗後，在另一個窗口打開一個新的聚尚網首頁；在Firefox中，表現和A中一樣。</p>
D: <a href="#" onclick="window.location.href='http://www.fclub.cn';return false" target="_blank">點擊D</a>
<p> 點擊D後，IE各版本和Firefox都是直接進入了聚尚網首頁。</p>
E: <a href="javascript:void(0);" onclick="window.location.href='http://www.fclub.cn';return false" target="_blank">點擊E</a>
<p> 點擊E後，IE各版本和Firefox都是直接進入了聚尚網首頁。</p>
</br>
F: <a href="http://www.google.com" onclick="window.location.href='http://www.fclub.cn';alert('怎麼執行')" target="_blank">點擊F</a>
<p> 點擊F後，IE各版本都是當前頁url變成http://www.fclub.cn，然後彈窗，點掉彈窗後當前頁進入了聚尚網首頁，並且新打開一個Google頁面；Firefox中，先是url變成http://www.fclub.cn，然後彈窗，點掉彈窗後，當前窗口進入聚尚網首頁，與IE不同的是，不以任何形式打開Google首頁。</p>
G: <a href="http://www.google.com" onclick="window.location.href='http://www.fclub.cn';alert('怎麼執行');return false" target="_blank">點擊G</a>
<p>點擊G後，IE各版本都是當前頁url變成http://www.fclub.cn，然後彈窗，點掉彈窗後當前頁進入了聚尚網首頁，沒有新打開一個Google頁面；Firefox中，表現和F一樣。</p>
H: <a href="http://www.google.com" onclick="window.location.href='http://www.fclub.cn';alert('怎麼執行')" target="_blank">點擊H</a>
<p> 點擊H後，IE各版本及Firefox表現和G一樣。</p>
</br>
I: <a href="http://www.google.comn" onclick="return false;" target="_blank">點擊I</a>
<p> 點擊I後，IE各版本及Firefox都沒有任何，href也都沒有執行。</p>
</br>
J: <a href="http://www.google.com" onclick="alert('怎麼執行')" target="_blank">點擊J</a>
<p> 點擊J後，IE各版本和火狐都是先彈窗，點掉彈窗後，在新的頁面中打開Google首頁。</p>
</body>
</html>
總結：通過A-J這11個試驗用例我們可以發現以下情況：
1、通過彈窗和打開新頁面的順序可以發現，在IE各個版本和Firefox中，都是先執行onclick事件，再執行href，onclick事件的優先級高於href。
2、在Firefox中，如果onclick中有可用的"window.location.href"，則直接進入"window.location.href"中的url鏈接，不再執行<a>標籤中的href，如果onclik中無可用"window.location.href"，則會進入<a>標籤中href中的鏈接。
3、通過I以及其他onclick中有"return false"試驗用例的表現，可以看出，href的執行被onclik中的return false阻斷了。
4、在IE各個版本中如果<a>標籤中"target=_self"，則最後進入的是href中的有效url。
5、當href中的值只是錨點或空，則IE各版本和Firefox都不會把它當作鏈接處理，即不會進入href的值。但是當href="javascript:void(0)"，IE6會把它當作有效url處理，而進入url="javascript:void(0)"的一個空頁面，IE6以上版本和Firefox則把不它當作有效url處理。
Hoogle 2011-12-11
新浪微博：http://www.weibo.com/yinuoba 歡迎關注。。。
IT博客大賽投票邀請：http://blog.51cto.com/contest2011/1793311