Which “href” Value Should You Use for JavaScript Links: # or javascript:void(0)?

When you’re creating a link whose sole purpose is to run JavaScript code, you may wonder which href value is best to use. Should you use # or javascript:void(0)? While both options will technically work, there are important differences in functionality, page behavior, and best practices.

Let’s explore each option:

1. Using href="#"

<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

Here, the href="#" sets up a clickable link that triggers the JavaScript function myJsFunc() when clicked. However, there are some drawbacks:

• Page Scrolling: By default, clicking a link with href="#" scrolls the page back to the top because # refers to the top of the page (the default anchor).

• JavaScript Errors: If the JavaScript function encounters an error, or JavaScript is disabled in the user’s browser, the browser will still follow the href="#", causing undesirable scrolling behavior.

• Return False: To prevent this, developers often add return false; in the onclick handler to stop the default behavior:

  <a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>
  

  While this works, it increases the chance of mistakes. If a developer forgets to include return false; or handle potential JavaScript errors, the page could still scroll.

2. Using href="javascript:void(0)"

<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

This method stops the page from scrolling entirely, even if an error occurs in the JavaScript function. The javascript:void(0) expression is used to prevent the browser from performing any action. The void(0) simply returns undefined, ensuring that no page reloading or scrolling happens.

Why Developers Prefer javascript:void(0)

Avoiding Common Errors

When working in teams, the href="#" approach can lead to confusion or errors. Developers might forget to add return false; at the end of the onclick function, which can result in the page scrolling to the top. This error can become especially hard to track when JavaScript functions are dynamically assigned.

By using javascript:void(0), you eliminate the need for the return false; step, simplifying the code and avoiding common pitfalls.

Handling JavaScript Errors

Another issue with using href="#" is that if the JavaScript function throws an error, the browser will still follow the link, causing an unintended page scroll. Using javascript:void(0) prevents this behavior, even if errors occur in your code.

Downsides of javascript:void(0)

While javascript:void(0) works well, it has some limitations. For instance, it can violate Content Security Policy (CSP) on HTTPS pages, which disallows inline JavaScript in certain environments.

Modern Best Practices: Unobtrusive JavaScript

Instead of embedding JavaScript directly in your HTML (onclick), it’s considered a best practice to separate your JavaScript from your HTML entirely. Here’s an example using event listeners in JavaScript:

Example:

<a id="myLink">Run JavaScript Code</a>

<script>
  document.getElementById('myLink').addEventListener('click', function(event) {
    event.preventDefault();  // Prevent the default behavior
    myJsFunc();  // Call your function
  });

  function myJsFunc() {
    alert("myJsFunc");
  }
</script>

In this approach, we use event.preventDefault() to prevent the link’s default behavior (scrolling or navigating). The JavaScript logic is kept separate from the HTML, following the principles of unobtrusive JavaScript and progressive enhancement.

When Should You Use Each Option?

• Use href="#": If you are building a simple link that doesn’t require JavaScript to function (e.g., graceful degradation). However, make sure to handle default behavior by adding return false; in your JavaScript functions.
• Use javascript:void(0): If you’re building a link whose only purpose is to trigger a JavaScript function and you want to prevent any default action, especially in cases where JavaScript may fail.

The use of javascript:void(0) is generally a safer and more reliable option when building links that only run JavaScript. It avoids issues like page scrolling and gracefully handles JavaScript errors. However, the best practice is to keep JavaScript separate from your HTML entirely by using event listeners. This approach promotes cleaner, more maintainable code and aligns with modern web development standards.