網頁連結元素 Javascript Call 之 IE 地雷

相信很多Web開發者都會使用無作用連結做一些項目的設計
例如：<a href="javascript:void(0);" onclick="handler()" > Click me! </a>
設計的原因包含了 link element 的外觀較醒目、預設的mouseover行為的cursor就是pointer等等

你可以注意到其中的href屬性設定了 "javascript:void(0);"
href 裡前綴為javascript:的內容會被做為 inline javascript call 執行
如此可以避免執行browser的 link element 的頁面跳轉預設行為
void(0); 則表示在JavaScript中什麼也不做
這樣就完成了一個無作用連結

既然 href 可以用來執行JavaScript，當然你也可以用  "javascript : functionA();" 的形式
讓 link element 在被點擊後執行 functionA
聽起來是很方便的做法，既然如此為什麼還會很常聽到不要這樣做的建議?
原因有2點

1是這一段 function 是用eval parse文字後才執行，效率會差一些
當然這個影響並不是那麼大，下一個原因才是重點，也是今天踩到的雷

2.在瀏覽器間的行為並不一致
當使用的function會回傳DOM object，IE會將頁面導到空白頁面並顯示[object HTMLElement]的訊息
而且直到最新的IE11的行為也是如此
這一點算是IE在行為的解讀比較奇怪，都已經是執行JavaScript了卻還保留原本的跳轉頁面行為

所以基於以上理由，少在 link element 的 href 屬性使用 inline JavaScript call 吧