遇到過幾次這種問題,現在總結一下。
代碼:
<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>
這里由於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);
當然前提是你的頁面不要有錨點的名字是#的喲~
