請選擇 進入手機版 | 繼續訪問電腦版
搜索
熱搜: 活動 交友 discuz
查看: 7782|回復: 0

[JavaScript] 無作用連結: <a href="#" > 與 <a href="javascript: void(0)"

[複製鏈接]
發表於 2013-9-5 11:15:48 | 顯示全部樓層 |閱讀模式
本帖最後由 郭子錢 於 2013-9-5 11:22 編輯

無作用連結大致有兩種寫法, <a href="#" > 和 <a href="javascript: void(0)" > :

無作用連結多半是用來執行 click event ,例如:
  1. <a href="javascript: void(0)" onclick="handler()" >Link</a>
複製代碼
點下連結時,不會連往另一頁,而是執行函式 handler() 。




<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 註冊
  1. <a href="#" onclick="handler(); return false;">Link</a>
複製代碼
JavaScript 註冊
  1. oLink.onclick = handler;

  2. function handler() {
  3.   // ...
  4.   return false;
  5. }
複製代碼
W3C DOM 標準式
  1. oLink.addEventListener('click', handler, false); // IE9, Firefox, Chrome

  2. function handler(e) { // "e" is the event object
  3.   // ...
  4.   e.preventDefault();
  5. }
複製代碼
IE 式
  1. oLink.attachEvent('onclick', handler);  // IE Only

  2. function handler() {
  3.   // ...
  4.   return false;
  5. }
複製代碼
  1. oLink.attachEvent('onclick', handler);  // IE Only

  2. function handler(e) { // "e" is the event object
  3.   // ...
  4.   e.returnValue = false;
  5. }
複製代碼
加上這些解決方式, 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)" 進行處理。
您需要登錄後才可以回帖 登錄 | 註冊

本版積分規則

本論壇為非營利之網路平台,所有文章內容均為網友自行發表,不代表論壇立場!若涉及侵權、違法等情事,請告知版主處理。


Page Rank Check

廣告刊登  |   交換連結  |   贊助我們  |   服務條款  |   免責聲明  |   客服中心  |   中央分站

手機版|中央論壇

GMT+8, 2024-3-28 20:09 , Processed in 0.153819 second(s), 17 queries .

Powered by Discuz!

© 2005-2015 Copyrights. Set by YIDAS

快速回復 返回頂部 返回列表