You are here: 首頁 Javascript相關訊息 關於超連結a的另外一種OnClick的寫法

飛朵啦學習手札

本網站建議使用Firefox2.0以上,或是使用Goole瀏覽器來瀏覽,並使用1024x768解析度來觀看.

關於超連結a的另外一種OnClick的寫法

E-mail 列印 PDF

原本我都是這樣寫

<a href='javascript:void(0)' OnClick='edit_confirm()' title='編輯' > </a>

原來可以這樣寫

<a href='javascript: edit_confirm()' ></a>

 

 

 

以下附上超連結無效點擊的做法轉貼至: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 死亡,這個問題也越來越無足輕重。

 

 
 

新增回應


驗證碼
更新