Disable link with javascript

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.

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:

< script >
var link = document. getElementById ( ‘home’ ) ;
document. addEventListener ( ‘click’ , function ( e ) {
if ( e. target . id === link. id ) {
e. preventDefault ( ) ;
}
} ) ;

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.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник

Disable Links in JavaScript

1. Set href to Different Functions to Disable Links in JavaScript
2. Use the addEventListener() Method to Disable Links in JavaScript
3. Use the name Attribute to Disable Links in JavaScript
4. 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 linktitle>  head> body>  p>Disable linkp>  a href="javascript://" id="home">Youtubea>br>  a href="javascript:void(0)" id="home">Googlea>br>  a href="#" id="home">Gita>br>  body>  html> 

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 JavaScripttitle>  head> body>  p>Disabled Link using JavaScriptp>  a href='https://www.google.com/' id='home' target='blank'>Googlea>  body>  script>  var link = document.getElementById('home');  document.addEventListener('click', function (e)   if (e.target.id === link.id)   e.preventDefault();  >  >);  script>  html> 

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 JavaScripttitle>  head> body>  p>Disabled Link using JavaScriptp>  a href='https://github.com/' target='blank' name="git">GitHuba>  body> script>  document.addEventListener('click', function (e)   if (e.target.name === 'git')   e.preventDefault();  >  >);  script>  html> 

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 jQuerytitle>  script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">script>  head> body>  p> Disabled link using jQueryp>  a href="https://www.youtube.com/" id="home" target="blank">Youtubea>  body> script>  $(document).ready(function ()   $('#home').click(function ()   return false;  >);  >);  script>  html> 

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

Источник

How to Disable a Hyperlink using JavaScript or jQuery

Unlike HTML form input controls, there is no disabled attribute for the &lta> tag. Therefore, simply adding the disabled attribute to the link won’t actually disable it. There is a workaround though. You can use the DOM addEventListener() method in JavaScript to prevent it to perform its default behavior and there is also a simple method in jQuery.

Links are useful for navigating a website and why would anyone want to disable it, depends on a situation. I have seen this kind of behavior on bank portals. In such cases, you can simply remove the page link from the &lta> tags href attribute. However, if you want to do this dynamically, on special occasions, try these examples.

Disable &lta> tag in JavaScriptusing DOM addEventListener() Method

The DOM addEventListener() method attaches an event handler to the document. We can use this method to prevent a link from opening a page.

<html> <head> <title>Disable Link using JavaScript</title> </head> <body> <p>The below link is disabled using JavaScript</p> <a href='https://www.encodedna.com/' target='blank'>Home</a> </body> <script> var lnk = document.getElementById('home'); if (window.addEventListener) < document.addEventListener('click', function (e) < if (e.target.id === lnk.id) < e.preventDefault(); // Comment this line to enable the link tag again. > >); > </script> </html>

The addEventListener() method returns the element (e) when clicked anywhere on the document. When a user click’s our Home Link, the listener checks the id and prevents the &lta> tags default behavior that is opening the specified link.

You can use the name attribute too. For example, if the hyperlink has a name attribute like,

<a href="https://www.encodedna.com/" name="theHomePage" target="blank">Home</a>

then your if condition should be,

if (e.target.name === 'home') < e.preventDefault(); >

If you want to disable multiple &lta> tags or hyperlinks on a web page, you can simply use the nodeName property of the element, like this …

if (e.target.nodeName === 'A') < e.preventDefault(); >

Using jQuery to disable &lta> tag

With jQuery, you can use the click handler, which will return a false when someone clicks the link. Its like saying, do nothing when this link is clicked.

In the above example, I am using the id as selector. You can the a as selector when you want to disable all the links on a web page, like this.

As usual, the jQuery methods are less complicated and straightforward. However, if you want to avoid using a library, then I would recommend using the first example above that uses a simple JavaScript method.

Well, that’s it. Thanks for reading. ☺

Источник

How to Disable a HTML Anchor Tag

In this post, we’ll learn how to disable a HTML anchor tag using CSS or inline JavaScript.

Disable HTML Anchor Tag with CSS

The best way to disable a link tag is by using the CSS property pointer-events: none; . When you apply pointer-events: none; to any element, all click events will be disabled.

Because it applies to any element, you can use it to disable an anchor tag.

Here’s how to use pointer-events: none; inline to disable a link tag:

Alternatively, you can use CSS classes and separate the CSS:

By using a CSS class, you can disable multiple anchor tags at once.

If you really wanted to, you could even disable all anchor tags on a page by targeting the a tag:

Be careful with this technique as it can have unintended consequences!

Disable HTML Anchor Tag with JavaScript

If you don’t want to use CSS, you can also disable a link tag by using inline JavaScript.

Here’s an example of a link that is disabled using JavaScript:

If you try clicking on this link, it won’t work, thereby disabling the link.

While this works, the best way to disable a link tag is to use CSS.

Conclusion

We’ve seen how to disable a link tag using CSS or JavaScript. We’ve also seen how to disable multiple anchor tags at once.

Hopefully, you’ve found this post helpful!

If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!

Give feedback on this page , tweet at us, or join our Discord !

Источник