JScript Katana

What Is “javascript:void(0)”? Complete Guide to Meaning, Usage, and Best Practices

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

1. Introduction – What Is “javascript:void(0)”?

When learning JavaScript, you may come across the notation “javascript:void(0)” in code. At first glance, it can be difficult to understand. However, it is one of the useful techniques for controlling page behavior and managing event handling. This article clearly explains the meaning, purpose, and usage of “javascript:void(0)”. It also covers important precautions and modern alternatives.

1-1. Common Question: What Does “javascript:void(0)” Mean?

“javascript:void(0)” is a notation used to prevent the default behavior of links or buttons and instead execute custom JavaScript. Normally, an HTML <a> tag navigates to a destination page when clicked. But when you want the link to behave like a button without navigating anywhere, “javascript:void(0)” becomes useful. Example:
<a href="javascript:void(0);">Click</a>
Clicking this link does nothing by itself. You can attach your own JavaScript event handling instead.

1-2. Reader Challenges and Article Purpose

When adding custom event handling to web pages, there are many ways to control links and buttons. However, “javascript:void(0)” can be confusing for beginners and may affect SEO or accessibility if misused. This article covers the following topics so you can understand and use it correctly:
  1. The basic concept and implementation of “javascript:void(0)”
  2. Precautions and disadvantages
  3. Safer and modern alternatives
With this knowledge, you will be able to build more modern and efficient web applications.

2. Basic Concept of “javascript:void(0)”

“javascript:void(0)” is a type of JavaScript expression used primarily to disable the default behavior of links or buttons. This section explains how the void operator works and what “void(0)” actually means.

2-1. What the “void” Operator Means

In JavaScript, the “void” operator returns nothing (undefined). Normally, JavaScript expressions return a value, but “void” forces the result to be undefined. It is mainly used to ignore the evaluation result while performing side effects. Basic example:
console.log(void(0)); // Output: undefined
This confirms that void(0) returns undefined.

2-2. What “void(0)” Represents

“void(0)” represents “do nothing”. It evaluates to undefined, preventing page navigation while allowing your custom click behavior. Example:
<a href="javascript:void(0);" onclick="alert('Clicked!');">Click</a>
This link does not navigate but triggers an alert.

2-3. Why “javascript:void(0)” Is Used

Main reasons include:
  1. Disable link navigation Prevent page reload while handling custom click events.
  2. Use as a dead link Useful as a placeholder during development.
  3. Simple and easy to implement Beginner-friendly syntax.

3. Usage Examples and Implementation

This section explains real-world usage examples of “javascript:void(0)” from basic snippets to applied scenarios.

3-1. Basic Code Example

<a href="javascript:void(0);">Link</a>
This link does nothing when clicked.

3-2. Customizing Click Events

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

3-3. Scenario-Based Example

Triggering a Modal Window 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. Benefits and Drawbacks – Should You Really Use It?

“javascript:void(0)” is widely used, but it has some drawbacks. This section explains both advantages and cautions.

4-1. Benefits

  1. Prevents default navigation
  2. Simple and intuitive syntax
  3. Useful for placeholder links

4-2. Drawbacks

  1. SEO impact Search engines cannot crawl href content.
  2. Accessibility issues Screen readers and keyboard navigation may not work properly.

4-3. When to Use and When to Avoid

Recommended Use Cases:
  • Behaving like a button but implemented as a link
  • Temporary dead links
Avoid When:
  • You need SEO-friendly links
  • Accessibility is important

5. Alternatives and Modern Best Practices

Although “javascript:void(0)” is convenient, more modern and safer approaches exist.

5-1. Using event.preventDefault()

Concept This method cancels default behavior such as link navigation or form submission. Example HTML:
<a href="#" id="customLink">Link</a>
JavaScript:
document.getElementById('customLink').addEventListener('click', function(event) {
  event.preventDefault();
  alert('Custom event executed!');
});

5-2. Using the <button> Tag

HTML5 recommends using <button> elements when implementing button-like behavior. HTML:
<button id="actionButton">Click</button>
JavaScript:
document.getElementById('actionButton').addEventListener('click', function() {
  alert('Button clicked!');
});

5-3. Accessibility & SEO Friendly Example

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. Example Code by Use Case

6-1. Creating a Navigation Menu

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 Window Trigger

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. Summary – Using “javascript:void(0)” and Future Options

7-1. Key Takeaways

  1. Basic concept: Disable default link behavior and run custom logic.
  2. Cautions and alternatives: Use event.preventDefault() or <button> for SEO and accessibility.
  3. Practical examples: Navigation menus, modal triggers, and more.

7-2. Recommendations for Modern Development

While “javascript:void(0)” is still used, modern development prioritizes SEO and usability. Recommended approach:
  • Use “javascript:void(0)” for quick prototypes or very small projects.
  • Use event.preventDefault() or <button> in production environments.

7-3. Final Thoughts

Using the techniques introduced here, implement coding that considers both SEO and user experience.
広告