Disable download link while downloading

Question

How to implement this functionality?

When the user presses the Download link he will receive a download confirmation message and where he wants to save the file.

This download takes on average about 30s (it may even take longer depending on the required date).

I wanted to disable this link during the time the download is done and return to normal when the download is completed.

Is there any event to capture the start and end of the download?

Update

My question needed two answers to be complete. @Leandrade answered a part of it (how to disable the link <a>. I will post here as I did to capture the end of the download.

1. In the back-end (in my case php) create a function to send a cookie when the file becomes available in the Browser for download. Note that we cannot know if the user will accept the download or not. Here is the code setcookie("statusDownloading", "done", time() + (300), "/");

2. In the front end when the user clicks on the link, it is disabled (or removed) and starts a loop that looks for the cookie sent by php, in this case statusDownloading. When the cookie is found, the link is reestablished, the cookie is deleted and the loop is stopped.

   function removeLink () {
       let htmlObj=$('#LinkDownload');
   
       htmlObj.detach();
   
       setTimeout(function(){
           let condition=true;
           while (condition) {
               let theCookies = document.cookie.split(';');
               for (let i = 1 ; i <= theCookies.length; i++) {
                   let str = theCookies[i-1];
                   let cookie=str.split("=");
                   let cookieName = cookie[0];
                   if(cookieName.trim() == 'statusDownloading'){
   
                       htmlObj.appendTo('#parentOfLinkDownload');
   
                       document.cookie = 'statusDownloading=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
                       condition=false;
                       break;
                   }
               }
           }
       }, 1000);
   }
   

Answer 1

Yes this is perfectly possible, note my sample code. I made a function in Javascript that by clicking on the link a, the same 'lose' attribute href and after the count that in his case would be the download, he returns to have the href, more explanations in the code:

var a = document.getElementsByTagName('a')[0];  // pega a tag a

a.onclick = function() {                        // no clique do a
  a.attributes.removeNamedItem("href");         // removo o atributo href
  
  setTimeout(function() {                       // depois de 2 segundos
    var b = document.createAttribute("href");   // crio o atributo href de novo
    b.value = "#";                              // atribuo um link para ele
    a.setAttributeNode(b);                      // e seto o novo atributo no a
    console.log('Download concluído!');
  }, 2000);
  
}

<a href="#">Clique aqui</a>

Remembering that there is no specific javascript method to capture the beginning and end of a download!