到底是 <a href="#" onClick="..."> 還是 <a href="javascript: ...">

常在網頁看到這樣的 HTML ︰ <a href="#" onclick="handler()" >Link</a> 。
也就是點下連結不會連往另外一頁，而是跑去執行名叫 handler 的 JavaScript 函式。
但是寫 href="#" 會有兩個後遺症︰

1. 網址列的最後面會多一個 # 。
2. 網頁的捲軸會移到最上面。

可以用以下方式代替，解決上述問題 :

<a href="javascript: return false;" onclick="handler()">

或是更簡單的格式 :

<a href="javascript: handler(); return false;">



/////////////////// 瀏覽器的差異 ///////////////////

還有一個問題，就是回到上頁，常常看到這種寫法 :
<a href="#" onclick="history.back()">

這種寫法的執行結果，在 Firefox 和 IE 完全不同

IE 會如 "預期" 跳回剛才瀏覽的上一頁
但是 Firefox 卻還是停留在原本這頁，這是怎麼回事呢?

經過測試發現，原來這是 firefox 對 <a href="#"> 這個連結動作，也把他當成是瀏覽記錄的一部分了

所以 <a href="#" onclick="history.back()"> 對 firefox 來說，就是執行兩個動作:

1. 先跳到網頁的最上方 (這算一個瀏覽紀錄)
2. history.back() 回到上一個瀏覽記錄，也就是 href="#" ....... (無言)

而 IE 的作法就不同，當 href="#", onclick="history.back() 兩個東西寫在一起的時候
他不把 <a href="#"> 這個連結動作當成是歷史紀錄，但還是會執行它，所以 IE 的動作就如下:

1. 先跳到網頁的最上方
2. history.back() 回到上一個瀏覽頁面

可以用以下的程式，分別在 IE (版本7) 和 firefox (3.5) 底下跑看看，結果有什麼不同

<div><a href="#anchor" onclick="javascript: history.go(-1)">回上頁</a></div>
<div><a href="javascript: return false;" onclick="javascript: history.go(-1)">回上頁</a></div>
<div><a href="javascript: history.go(-1)">回上頁</a></div>

/////////////////// 結論 ///////////////////

如果要把回上頁的功能，寫在 <a> 標籤內
或者說，如果想在 <a> 標籤內加上 javascript
建議用 <a href="javascript: xxxx "> 這種格式


參考網址 : Vexed's Blog