How to prevent a click on a link – HTML tag
In this article, we’ll learn how to prevent a click on a link, also known as an HTML <a> tag, which we use to redirect the user.

Hey you programmer, okay? Let’s learn more new stuffs!
We have two effective methods to remove the click effect of a link or tag, as you prefer
One of them is with pure CSS, however we should be aware that it is not supported by some (very few) browsers
And the other way is via JavaScript, which is supported by all browsers, so the choice is yours
Let’s look at both cases in practical examples.
Here’s the CSS example to prevent clicking on a link:
a { pointer-events: none; }
Using the pointer-events rule, we can remove the click event on the anchor, making it no longer redirect the user when clicking on it
| Do you want to specialize in Web Development? Check out our course catalogue.
We just need to set the value none, adding this rule to the element we need
Check out the JavaScript version:
let link = document.getElementById('link'); link.addEventListener('click', function(event){ event.preventDefault(); });
In this example we encapsulate the element in a variable using the getElementById method.
And then we bind a click event with addEventListener, and prevent the default behavior (change URL) with event.preventDefault()
This way the link will no longer work with your default event
And we can harness any other type of behavior via JavaScript
Conclusion
In this article we learned two ways to prevent a click on a link, which is the default event of the HTML a tag
First we saw with CSS, using pointer-events with none
And the second possibility was with JavaScript, through a click event, adding a preventDefault in the default event
Want to learn more about JavaScript? Click here!