JScript Katana

什麼是 “javascript:void(0)”？完整指南：意義、用法與最佳實踐

實用工具函式
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. 介紹 – 「javascript:void(0)」是什麼？

在學習 JavaScript 時，你可能會在程式碼中看到「javascript:void(0)」這個寫法。乍看之下，可能不太容易理解。然而，它是控制頁面行為與管理事件處理的實用技巧之一。
本文將清楚說明「javascript:void(0)」的意義、目的與用法，並討論重要的注意事項與現代的替代方案。

1-1. 常見問題： 「javascript:void(0)」是什麼意思？

「javascript:void(0)」是一種用來阻止連結或按鈕的預設行為，改為執行自訂 JavaScript 的寫法。
通常，HTML 的 <a> 標籤在點擊時會導向目的頁面。但當你希望連結的行為像按鈕一樣，卻不想跳轉到任何位置時，「javascript:void(0)」就非常有用。
範例：

<a href="javascript:void(0);">Click</a>

點擊此連結本身不會產生任何動作，你可以自行掛上 JavaScript 事件處理。

1-2. 讀者可能的困擾與本文目的

在為網頁加入自訂事件處理時，有許多方式可以控制連結與按鈕的行為。然而，「javascript:void(0)」對初學者來說常讓人感到困惑，若使用不當也可能影響 SEO 或可及性（accessibility）。
本文將說明以下主題，讓你能正確理解與使用它：

  1. 「javascript:void(0)」的基本概念與實作方式
  2. 使用時的注意事項與缺點
  3. 更安全、較現代的替代方案

掌握這些知識後，你就能打造更現代、效能更佳的 Web 應用程式。

2. 「javascript:void(0)」的基本概念

「javascript:void(0)」是一種主要用來停用連結或按鈕預設行為的 JavaScript 表達式。本節說明 void 運算子如何運作，以及「void(0)」實際代表什麼。

2-1. 「void」運算子的意義

在 JavaScript 中，「void」運算子會回傳「nothing」(即 undefined)。
一般而言，JavaScript 表達式都會回傳一個值，但使用「void」會強制結果變成 undefined。它主要用於在執行副作用（side effect）時，忽略評估結果。
基本範例：

console.log(void(0)); // Output: undefined

這段程式碼證明 void(0) 會回傳 undefined。

2-2. 「void(0)」代表什麼

「void(0)」的含義是「什麼都不做」。它會評估為 undefined，從而阻止頁面導向，同時允許你自行定義點擊行為。
範例：

<a href="javascript:void(0);" onclick="alert('Clicked!');">Click</a>

此連結不會導向任何頁面，但會觸發 alert。

2-3. 為什麼會使用「javascript:void(0)」

主要原因包括：

  1. 停用連結導向 – 在處理自訂點擊事件時避免頁面重新載入。
  2. 作為死鏈 – 在開發階段作為佔位符使用。
  3. 簡單易實作 – 初學者友好的語法。

3. 使用範例與實作

本節說明「javascript:void(0)」在實務上的使用範例，從基本片段到應用情境皆有示範。

3-1. 基本程式碼範例

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

點擊此連結不會產生任何動作。

3-2. 客製化點擊事件

範例 1：顯示 Alert

<a href="javascript:void(0);" onclick="alert('Clicked!');">Click</a>

3-3. 情境式範例

觸發 Modal 視窗
HTML：

<a href="javascript:void(0);" id="openModal">Open Modal</a>
<div id="modal" style="display:none; background:rgba(0,0,0,0.5); padding:20px;">
  <p>This is a modal window.</p>
  <button id="closeModal">Close</button>
</div>

JavaScript：

document.getElementById('openModal').addEventListener('click', function() {
  document.getElementById('modal').style.display = 'block';
});
document.getElementById('closeModal').addEventListener('click', function() {
  document.getElementById('modal').style.display = 'none';
});

4. 優點與缺點 – 真的該使用嗎？

“javascript:void(0)” 被廣泛使用，但它也有一些缺點。本節說明其優點與注意事項。

4-1. 好處

  1. 防止預設導向
  2. 語法簡潔直觀
  3. 適合作為佔位連結

4-2. 缺點

  1. SEO 影響：搜尋引擎無法爬取 href 內容。
  2. 可及性問題：螢幕閱讀器與鍵盤導覽可能無法正常運作。

4-3. 何時使用、何時避免

建議使用情境：

  • 想要呈現按鈕行為但以連結實作
  • 暫時的死連結

避免使用情境：

  • 需要 SEO 友善的連結
  • 必須考量可及性

5. 替代方案與現代最佳實踐

雖然 “javascript:void(0)” 方便，但仍有更現代且安全的方法可供選擇。

5-1. 使用 event.preventDefault()

概念
此方法會取消預設行為，例如連結導向或表單送出。

範例
HTML：

<a href="#" id="customLink">Link</a>

JavaScript：

document.getElementById('customLink').addEventListener('click', function(event) {
  event.preventDefault();
  alert('Custom event executed!');
});

5-2. 使用 <button> 標籤

HTML5 建議在實作類按鈕行為時使用 <button> 元素。

HTML：

<button id="actionButton">Click</button>

JavaScript：

document.getElementById('actionButton').addEventListener('click', function() {
  alert('Button clicked!');
});

5-3. 可及性與 SEO 友善範例

HTML：

<a href="#" id="accessibleLink" tabindex="0">Click</a>

JavaScript：

document.getElementById('accessibleLink').addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    alert('Executed with Enter key!');
  }
});

6. 各使用情境的範例程式碼

6-1. 建立導覽選單

HTML：

<a href="javascript:void(0);" id="menuToggle">Menu</a>
<ul id="menu" style="display: none;">
  <li><a href="#">Home</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

JavaScript：

document.getElementById('menuToggle').addEventListener('click', function() {
  const menu = document.getElementById('menu');
  menu.style.display = (menu.style.display === 'none') ? 'block' : 'none';
});

6-2. Modal 視窗觸發

HTML：

<a href="javascript:void(0);" id="openModal">Open Modal</a>
<div id="modal" style="display:none; background:rgba(0,0,0,0.5); padding:20px;">
  <p>This is a modal window.</p>
  <button id="closeModal">Close</button>
</div>

JavaScript：

const modal = document.getElementById('modal');
document.getElementById('openModal').addEventListener('click', function() {
  modal.style.display = 'block';
});
document.getElementById('closeModal').addEventListener('click', function() {
  modal.style.display = 'none';
});

7. 小結 – 使用 “javascript:void(0)” 與未來選項

7-1. 重點回顧

  1. 基本概念：停用預設連結行為，改為執行自訂邏輯。
  2. 注意事項與替代方案：使用 event.preventDefault() 或 <button> 以提升 SEO 與可及性。
  3. 實務範例：導覽選單、Modal 觸發等。

7-2. 現代開發的建議

雖然 “javascript:void(0)” 仍在使用，現代開發更重視 SEO 與使用者體驗。
建議做法：

  • 在快速原型或極小型專案中可使用 “javascript:void(0)”。
  • 在正式產品中使用 event.preventDefault() 或 <button>。

7-3. 最後的想法

運用本章介紹的技巧，撰寫兼顧 SEO 與使用者體驗的程式碼。

広告