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
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 ⭐️).
orJoin 1000s of developers learning about Enterprise-grade Node.js & JavaScript