HTML 無作用連結 – href="#"? , href="javascript:void();"? 差別在哪?

HTML <a> 標籤若是有 href 屬性的話:
:link 選擇器可以選到
– 可以 focus (可以用 TAB 移動到)
– 有 cursor: pointer 的效果
 cursor: pointer 可以參考這裡

所以若是想使用 <a> 標籤的效果,卻又不想要點下去亂跑,常見有很多種做法,大致分成兩派:
1. # 系列
- <a href="#"></a>
會讓頁面跳到最上面,並在 location.href 最後面加一個 #,並觸發 hashchange 事件
- <a href="#idontwanttogoanywhere"></a>
這個的話如果有 id = idontwanttogoanywhere 的元素會借由錨點機制貼齊元素上緣
- <a href="##"></a>
chrome 中不會跳到最上面,但  location.href 最後面加 ## ,並觸發 hashchange 事件
- <a href="###"></a>
IE 11 也不會跳到最上面了,但  location.href 最後面加 ### ,並觸發 hashchange 事件

這系列還有一個問題是 # 其實代表指向網頁自己,如果在新標簽或視窗上打開就會產生問題…

2. javascript: 系列
- <a href="javascript:void(0)"></a>
- <a href="javascript:void(0);"></a>
- <a href="javascript:"></a>
- <a href="javascript:;"></a>

這四個的作用相同,除了語義完整(javascript:void(0);)跟簡潔少字(javascript:)的爭議外,有個 IE6 的 Bug:點擊後會被判定做已經重定向,而之後的請求會失效。

通常也常用
onclick 事件的
- return false
- event.preventDefault()

其實還有一個讓人思考的點是,如果瀏覽器關閉 JavaScript 怎麼辦?有沒有辦法優雅退化?

比較優雅的做法其實是:
放一個實際可以連的 url href 用來平穩退化,再用 JavaScript 來做 onclick 更好的處理方式

另外如果只是個按鈕,語義比較好的方式應該是使用 <button> 標簽,可以參考這裡

不過有個瀏覽器 <button> 樣式不容易統一的問題就要之後在另外寫一篇來說了

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s