How to Disable Links in JavaScript
-
Set
hrefto Different Functions to Disable Links in JavaScript -
Use the
addEventListener()Method to Disable Links in JavaScript -
Use the
nameAttribute to Disable Links in JavaScript - Use jQuery to Disable Links in JavaScript
JavaScript conventions add a more efficient way to disable an anchor tag href. Usually, we can set the href="#" to ensure that a link is not routing to any address.
Also, there is the JavaScript function way to define an empty allocation such as href="javascript:void(0)". Again, we can also state href="javascript://", meaning the value is null.
In the following segment, we will see how we implement disabled links without JavaScript and make an efficient approach with JavaScript that is more meaningful. We will use the addEventListener() method, name attribute, and the jQuery way of disabling a defined link.
Set href to Different Functions to Disable Links in JavaScript
Here we will disable links only by setting the href to get null values. This is not the best way to imply the concept, as you often need the alteration of enabling and disabling a link.
So, keeping the href always empty requires hard coding the links in every modification.
<html>
<head>
<title>Disable link</title>
</head>
<body>
<p>Disable link</p>
<a href="javascript://" id="home">Youtube</a><br>
<a href="javascript:void(0)" id="home">Google</a><br>
<a href="#" id="home">Git</a><br>
</body>
</html>
Output:
javascript://, javascript:void(0), and # evaluate the href to have a null or undefined result. Consequently, we get a disabled link, but there are ways to perform this task better.
Use the addEventListener() Method to Disable Links in JavaScript
We will have an anchor tag having the home page of Google linked. If we wish to disable the link, we will manually define some conditions in the JavaScript section.
This will make the path of alteration easier. So, an eventListener() will get triggered every time the link is clicked.
The function will prevent the default activity on clicking the link, which is to route to the actual page that is linked.
<html>
<head>
<title>Disable Link using JavaScript</title>
</head>
<body>
<p>Disabled Link using JavaScript</p>
<a href='https://www.google.com/' id='home' target='blank'>Google</a>
</body>
<script>
var link = document.getElementById('home');
document.addEventListener('click', function (e) {
if (e.target.id === link.id) {
e.preventDefault();
}
});
</script>
</html>
Output:
-Method-to-Disable-Links.webp)
Use the name Attribute to Disable Links in JavaScript
In this example, we will focus on the name attribute. The basic task is to enable an eventListener(), but the condition check this time will be with the name attribute.
As you will see, commenting the e.preventDefault(); will cause to route to the actual site. So, this is one way of disabling the link by setting the preventDefault.
<html>
<head>
<title>Disable Link using JavaScript</title>
</head>
<body>
<p>Disabled Link using JavaScript</p>
<a href='https://github.com/' target='blank' name="git">GitHub</a>
</body>
<script>
document.addEventListener('click', function (e) {
if (e.target.name === 'git') {
e.preventDefault();
}
});
</script>
</html>
Output:
Use jQuery to Disable Links in JavaScript
The jQuery doesn’t perform something different from the task we already have examined. But the syntax is a bit different.
Here, we will not use the preventDefault() method. Instead, we will return a boolean value false every time the link is clicked.
This will successively disable a predetermined link.
<html>
<head>
<title>Disable link using jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<p> Disabled link using jQuery</p>
<a href="https://www.youtube.com/" id="home" target="blank">Youtube</a>
</body>
<script>
$(document).ready(function () {
$('#home').click(function () {
return false;
});
});
</script>
</html>
Output:
