比較href=”#” 和href=”javascript:void(0);”

阻止跳轉常見的有下面四種方式:

1. <a href="javascript:;" onclick="action();">link</a> 

2. <a href="javascript:void(0);" onclick="action();">link</a> 

3. <a href="###" onclick="action();">link</a> 

4. <a href="#" onclick="action();return false;">link</a>  

 

事實上這四種方式都可以很正常的工作。

第1和第2中可以歸為一類，使用javascript 偽協議，只要什麼都不返回，那麼瀏覽器將不會跳轉

第3種比較有意思，它使用了一個錨點（跳轉到id或name為##的位置），在瀏覽器中， 如果一個錨點不存在，那麼也不會跳轉

第4種是在執行onclick的最後處加上return false, 這樣就阻止了瀏覽器執行預設行為，同樣就阻止了跳轉

 

我以往的經驗都證明第4種是最穩妥的方式，因為第2種都會在ie6下出現bug：

當A被點擊， action() 函數裡如果有設定location,設定img.src,設定iframe.src 行為，從而導致一個新的資源下載時，ie6會中斷掉該行為。

 

第三種真的穩妥麼，或許我們可以猜測一下錨點的工作方式，

當<a>元素被點擊，瀏覽器發現href="###" ，首先要判斷這個href是否需要跳轉到別的頁面，如果不需要，那麼瀏覽器會將href後面兩個##取出來，然後遍曆DOM樹，找到第一個id(或者name)的值為##的，調用內部方法，使瀏覽器滾動到相應的位置 ，如果一個匹配的也沒有找到，那麼瀏覽器什麼也不做。

而這個過程中， 瀏覽器需要做的事情可能還有

- 啟動載入中提示

- 發出跳轉提示音（ie6,ie7） 

 

總之，###會導致瀏覽器執行一系列的預設行為（是否有效能問題？）， 包括ie6 7非常討厭的提示音,而只要我們阻止了預設行為，這一切都不會發生。

 

所以結論是，盡量不要使用href="javascript:;" href="###" ，而統一使用 onclick="return false;" ，這是安全的，也是體驗最好的。