200907022040無作用連結該寫 <a href="#" > 還是 <a 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)" 進行處理。

回應
Google 站內搜尋
BloggerAds
累積 | 今日
loading......
    沒有新回應!





Powered by Xuite