Question:

What is the purpose and effect of using javascript:void(0) as the href value of a link, and how does it interact with different mouse buttons?

I encountered a web app where some links have the href value of javascript:void(0), which is a pseudo URL that executes the void operator and returns undefined. When I left-click on such a link, nothing happens on the current page. However, when I middle-click or right-click and select “Open link in new tab”, it opens a blank tab with the address of javascript:void(0). This seems like a poor design choice, as it could confuse the users and prevent them from opening the link in a new tab. Why would a developer use javascript:void(0) instead of modifying the href attribute dynamically with JavaScript?

Answer:

Why use javascript:void(0) as a link?

Some web developers use javascript:void(0) as the href value of a link to prevent the browser from following the link and loading a new page. This is usually done when the link is meant to trigger some JavaScript code, such as opening a modal window, expanding a menu, or submitting a form. The void operator evaluates the expression after it and returns undefined, which effectively cancels the default behavior of the link.

However, using javascript:void(0) as a link has some drawbacks and limitations, especially when it comes to user experience and accessibility. For example, when a user middle-clicks or right-clicks and selects “Open link in new tab” on such a link, they will see a blank tab with the address of javascript:void(0), which is not very helpful or intuitive. Moreover, some users may have JavaScript disabled or use screen readers or keyboard navigation, which may not work well with javascript:void(0) links.

A better alternative to using javascript:void(0) as a link is to use a valid URL that corresponds to the content or action of the link, and then use JavaScript to override the default behavior of the link with the event.preventDefault() method. This way, the link will still work as expected when JavaScript is enabled, but will also provide a fallback option when JavaScript is disabled or not supported. Additionally, using a valid URL will make the link more descriptive and meaningful for the users and the search engines.

For example, instead of using:

“`html Log in
“`

You can use:

“`html Log in
“`

And then define the openModal function as:

“`javascript

function openModal(event, id) {

// Prevent the browser from following the link event.preventDefault(); // Show the modal window with the given id // … } “`