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!