/ #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", "Front-End Development Projects with Vue.js" with Packt, "The Jest Handbook" (self-published). Hugo 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, Elsevier and (currently) Eurostar.

Interested in Alpine.js?

Power up your debugging with the Alpine.js Devtools Extension for Chrome and Firefox. Trusted by over 15,000 developers (rated 4.5 ⭐️).