What does "javascript:void(0)" mean?

javascript

void-operator

accessibility

user-experience

byNikita Barsukov·Aug 12, 2024

The usage of javascript:void(0) is prevalent in <a> tag href attributes. This technique cancels out the default navigation behavior of the hyperlink. In other words, it allows you to execute JavaScript without causing any page redirection or reload:

<a href="javascript:void(0)" onclick="alert('No redirect!')">No Redirect</a>

In this practical example, clicking the link triggers an alert box without diverting from the current page or refreshing it, all thanks to the effect of void(0).

Void operator in depth

At the heart of javascript:void(0) lies the void operator, known for its peculiar attribute—it always returns undefined:

console.log(void 0);       // undefined
console.log(void('hello')); // undefined - doesn't matter what you put, it's still undefined

These cheeky bits of code essentially make void the most apathetic operator around—it won't argue, it just quietly gives you undefined in return, regardless of the expression to its right.

The button substitution

The javascript:void(0) approach has been traditionally used as a makeshift workaround to morph <a> tags into non-functional placeholders or triggers for JavaScript actions. However, the modern way is to use <button> elements for this purpose, thereby preserving semantic correctness, accessibility, and functionality:

<button onclick="alert('Button clicked! Who knew buttons could talk?')">Click Me</button>

Prioritizing accessibility

Elements designed to be clicked should ideally function perfectly even if JavaScript is turned off or fails to work properly. Instead of using javascript:void(0), use anchors with a safe fallback href or event.preventDefault() to ensure the user experience is not compromised:

<a href="fallback.html" onclick="event.preventDefault(); doSomething();">Click Me</a>

Smooth user experience

Using javascript:void(0) in your href attribute negates scroll-to-top effect, which is a common side effect of using # in href. So no more unexpectedly finding yourself back at the top of the page!

<a href="#" onclick="event.preventDefault(); return doSomething();">Click Me</a>

Security corner

javascript: pseudo-URLs carry a risk of potential security issues if not handled with care. Always sanitize any dynamic user input that might interact with such patterns to avoid any unwanted surprises.

Compatibility considerations

Remember that javascript:void(0) may not be the right fit for environments where JavaScript is disabled or not supported. Always strive for accessibility and compatibility when designing your solutions.

Keyboard-friendly interaction

When non-link elements are masquerading as clickable hyperlinks, ensure that they are accessible by implementing the tabindex and adding key listeners for Space or Enter key events. This helps to accommodate users who rely on keyboard navigation:

divElement.setAttribute('tabindex', 0);
divElement.addEventListener('keypress', function(e){
    if (e.key === ' ' || e.key === 'Enter'){
        console.log('Space or Enter? No matter! They should just make one key for both! 😎');
    }
});

No-script friendly design

Offer a clickable element that remains functional even if JavaScript is disabled. This holistic strategy enhances website accessibility and maintains all-weather resilience:

<noscript>
    <a href="fallback-page.html">Fallback Page</a>
</noscript>

Simulating hyperlinks

Preserve the intuitive nature and visual consistency of hyperlink behavior by using CSS to style buttons while ensuring JavaScript functions are well encapsulated:

button.link-style {
    background: none;
    color: blue;
    text-decoration: underline;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    /* This button is masquerading as a link so well it deserves an Oscar 🏆 */
}