a 的href="#"與href="javascript:void(0)"的區別

無做用連結多半是用來執行 click event ，例如：

<a href="javascript: void(0)" onclick="handler()" >Link</a>

點下連結時，不會連往另外一頁，而是執行函式 handler() 。

無做用連結大體有兩種寫法， <a href="#" > 和 <a href="javascript: void(0)" > ：

 

<a href="#" > 的問題是點下連結時：

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

要解決這兩個問題必須在 click event 動手腳，加上 return false 、 event.preventDefault() 、 或 event.returnValue = false ，避免 <a> 原先應該作的動做。

該如何加，取決於 click event 註冊的方式，詳盡的 Event 註冊方式介紹請參考淺談 JavaScript 的 DOM Event 註冊方式。這裡直接列出各種註冊方式的 <a href="#" > 問題解決方法，假設我已用 getElementById 或 getElementsByTagName 抓到了 <a> 這個 node ，並且取名為 oLink ：

傳統式

inline 註冊

<a href="#" onclick="handler(); return false;">Link</a>

JavaScript 註冊

oLink.onclick = handler;

function handler() {
  // ...
  return false;
}

W3C DOM 標準式

oLink.addEventListener('click', handler, false); // IE9, Firefox, Chrome

function handler(e) { // "e" is the event object
  // ...
  e.preventDefault();
}

IE 式

oLink.attachEvent('onclick', handler);  // IE Only

function handler() {
  // ...
  return false;
}

或

oLink.attachEvent('onclick', handler);  // IE Only

function handler(e) { // "e" is the event object
  // ...
  e.returnValue = false;
}

加上這些解決方式， href 寫什麼值其實也無所謂了，也就是不論 href 寫什麼，點下時皆不會連往。由此衍生的應用可參考用 <a href="..." > 實做 window.open() 。

 

相較之下 <a href="javascript: void(0)" > 簡單許多，沒有 <a href="#" > 的問題，故不須要對 click event 動手腳。

<a href="javascript: void(0)" > 已知的惟一問題是 IE6 若是點下連結的 click event 要導往另外一頁，例如 location = 、 form.submit() ，會失效。但隨著 IE6 死亡，這個問題也越來越無足輕重。

但 <a href="javascript: void(0)" > 的效能應該會比 <a href="#" > 差一些，因為 <a href="javascript: void(0)" > 是 inline JavaScript ，必須將 JavaScript Interpreter 開啟對字串 "void(0)" 進行處理。