飛朵啦學習手札

原本我都是這樣寫

原來可以這樣寫

以下附上超連結無效點擊的做法轉貼至:http://blog.xuite.net/vexed/tech/25193980-%E7%84%A1%E4%BD%9C%E7%94%A8%E9%80%A3%E7%B5%90%E8%A9%B2%E5%AF%AB+%3Ca+href%3D%22%23%22+%E9%82%84%E6%98%AF+%3Ca+href%3D%22javascript%3A+void(0)%22

無作用連結多半是用來執行 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="/joomla/..." 實作 window.open() 。

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

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