IE6與 javascript:void(0)

遇到過幾次這種問題，現在總結一下。

代碼：

<a onclick="window.location.href='http://www.google.com'" href="javascript:void(0);">google</a>      

這段代碼在主流的浏覽器裡面都沒問題，但是在IE6下就會出現不能跳轉的現象。

經過一翻排查，發現綁定的事件都會執行，是由于DOM本身的冒泡事件是以會最後執行href屬性内的javascript:void(0);導緻的。

a标簽

a标簽本來就是用來進行頁面跳轉的标簽，其運作機制是告訴浏覽器URL位址并且跳轉。當然，我們可以在href屬中直接執行javascript。

<a href="javascript:alert('Hello!');">Say Hello</a>      

Say Hello

這裡由于javascript執行了alert函數，但是其傳回的是null。是以a标簽沒有執行任何動作。

javascript:void(0);

void(arg);

可以了解為永遠傳回null的函數，但是其參數不能為空。其參數可以為任意的表達式甚至是函數。

<a href="javascript:void(name = 'will'); alert('Hello ' + name);">Say Hello</a>      

對IE6運作的猜想

IE6會先運作DOM本身綁定的事件，如onclick；如果沒有阻止冒泡，則會順序執行href屬性。而void(0);正是不需要執行任何事 件，則IE6告訴浏覽器不執行任何事件（覆寫之前的動作），并且終止冒泡相當于return false;于是浏覽器沒有執行任何動作。

這樣隻要在onclick事件内阻止冒泡事件即可。

經過改進的代碼為：

<a onclick="window.location.href='http://www.google.com' return false;" href="javascript:void(0);">google</a>      

這樣在IE6下就可以正常運作了。

其他方法

當然可以不使用javascript:void(0);而改使用#也可以避免，href屬性内的#本來的意思就是錨點#name是以當不指定任何錨時自然會到頁面頂端并在URL後加入Hash symbol。

這裡對于錨還有一個比較特殊的用法

當href屬性的值是錨點時，但是又找不到該錨點，則相當于傳回null，是以可以使用##來代替javascript:void(0);

當然前提是你的頁面不要有錨點的名字是#的喲~