This article will guide you about Disabling Links in JavaScript.
How to Disable Links in JavaScript?
To Disable Links in JavaScript, you can apply:
We will now go through each of the mentioned approaches one by one!
Method 1: Disable Links in JavaScript by Setting href attribute
“href” is an attribute of the anchor tag used to identify sections within a document. It can be used to return an “undefined” value by placing a null value “void(0)” in the “URL” to disable the link in JavaScript.
Syntax
Here, “URL” refers to the website resource for opening a web page and adding “void(0)” will disable it.
Look at the below-given example.
Example
In this example, we will place the href in the “<body>” tag. Now, we will return an undefined value by setting href to “https://www.youtube.com:void(0)”:
<a href= "https://www.youtube.com:void(0):void(0)" id= "home">Youtube</a><br>
</body>
The output of the above implementation will result in:
Method 2: Disable Links in JavaScript Using “addEventListener” method
In JavaScript, the “addEventListener()” method attaches an event handler to a document. We can utilize this method to add an event “click” and then disable the provided link by “preventDefault()” at a specific condition which will prevent the triggering of the added event.
Syntax
Here, the parameter “event” refers to the event type, and the parameter “function” is the function we want to access whenever the event occurs.
Look at the following example for a better understanding of the concept:
Example
Firstly, we will place the webpage link in the anchor tag of the “href” attribute. Here, “id=home” will open the homepage of youtube and the “blank” target will open the specified webpage in the new tab:
Next, we will access the href attribute value by passing it as a parameter to the “document.getElementById()” method. Now, we will include a “click” event and the function we want to access whenever the event occurs. Finally, a condition is applied in such a way that if the specified web page triggers as the click event, the event is disabled by the “preventDefault()” method:
var link = document.getElementById('home');
document.addEventListener('click', function (e) {
if (e.target.id === link.id) {
e.preventDefault();
}
});
</script>
The corresponding output in this case will be:
We have provided all the simplest methods to Disable Links in JavaScript. You can use any of the explained methods according to your requirements.
Conclusion
To disable links in JavaScript, you can apply the “href” attribute method for returning an undefined value by placing the null value “void(0)” in the “URL” placeholder or utilize the “addEventListener()” method for adding a click event at the specified URL in the href attribute and then disabling it on a specific condition. This write-up explained the methods to disable links in JavaScript.
