/ #html #javascript 

Disable a HTML <a> link/anchor tag

Here are 2 ways to disable a HTML <a> link/anchor element using CSS or by using inline JavaScript.

Table of Contents

Disable HTML anchor with CSS pointer-events: none

To disable a HTML anchor element with CSS, we can apply the pointer-events: none style.

pointer-events: none will disable all click events on the anchor element.

For example:

<a href="https://google.com" style="pointer-events: none">Google.com</a>

The pointer-events can be set using CSS properties and selectors:

<style>
.disabled-link {
  pointer-events: none;
}
</style>
<a href="https://google.com" class="disabled-link">Google.com</a>

This is a great option when you only have access to class or style attributes. It can even be used to disable all the HTML links on a page.

<style>
/* not recommended */
a {
  pointer-events: none;
}
</style>
<a href="https://google.com">Google.com</a>

We’ve now seen how to disable an HTML anchor/link element (a tag) using pointer-events: none, which can be done without touch the existing href attribute using styles.

Next we’ll see how to disable an HTML anchor/link element using inline JavaScript inside of the href attribute.

Disable HTML anchor with inline JavaScript href="javascript:void(0)"

The following link is disabled using inline JavaScript in the href attribute.

<a href="javascript:void(0)">Google.com</a>

This can be useful when combined with a JavaScript library like Alpine.js:

<div x-data="{ disabled: false }">
  <a :href="disabled ? 'javascript:void(0)': 'https://google.com'">Google.com</a>
  <button @click="disabled = !disabled">toggle disabled</button>
</div>

The examples in this post can be found on CodePen.

Photo by Jonathon Young on Unsplash

Author

Hugo Di Francesco

Co-author of "Professional JavaScript" with Packt. He runs the Code with Hugo website helping over 100,000 developers every month and holds an MEng in Mathematical Computation from University College London (UCL). He has used JavaScript extensively to create scalable and performant platforms at companies such as Canon and Elsevier.

Get The Jest Handbook (100 pages)

Take your JavaScript testing to the next level by learning the ins and outs of Jest, the top JavaScript testing library.