使用JavaScript启用href

Question

I have a JavaScript function using which I am disabling a hyperlink and it does the trick. Now after a few seconds lets say after 4 secs I want to enable the link. I am not sure how to do this. I've written a function to enable the link but it is not working.

Can someone please help using JavaScript.

JS functions

function disableDownloadReportLink(link) {
     link.onclick = function(event) {
        event.preventDefault();
     }
   }   

 function enableDownloadReportLink() {
     document.getElementById('downloadReportLink').href.disabled = false;
   }   

Answer 1

Basically, the same pattern as @Vicente Olivert Riera , just a different implementation, using add/remove EventListener ...

<a href="./foo" id="my-link">foo</a>

<script>
function disableLink(link) {
    var handler = function(e) {
        e.preventDefault();
        console.log('click disabled');
    }
    link.addEventListener('click', handler, false);
    link.dataset.disableHandler = handler;
}
function enableLink(link) {
    if (link.dataset.disableHandler) {
        link.removeEventListener('click', link.dataset.disableHandler);
        link.dataset.disableHandler = null;
    }
}

var link = document.getElementById('my-link');
disableLink(link);
link.style.color = 'grey';
console.log('link disabled');

setTimeout(function(){
    enableLink(link);
    link.style.color = 'blue';
    console.log('link enabled');
}, 4000);
</script>

Answer 2

You need to set aa timer in the on load funktion. This has been asked before, see here for an example How to set timer on body onload?

Answer 3

Add a class .inactive on which you would bind a click event to e.preventDefault();

After 4 sec, remove the class.

Answer 4

 function disableDownloadReportLink(link) { link.onclick = function(event) { event.preventDefault(); } } function enableDownloadReportLink(link) { link.onclick = undefined; } var el = document.getElementById("wop"); disableDownloadReportLink(el); setTimeout( function() { enableDownloadReportLink(el); }, 4000 ); 

 <a id="wop" href="http://www.google.com">I will work after 4 seconds!</a> 

Basically what you have done with disableDownloadReportLink is to disable what the onclick event does. What you can do if you want the link to work normally again is to set onclick to undefined :

function enableDownloadReportLink(link) {
    link.onclick = undefined;
}

You can put the call to enableDownloadReportLink into a setTimeout in order to do it after 4 seconds:

setTimeout(
  function() {
    enableDownloadReportLink(link);                                                                                                                              
  },
  4000
);

---

For your question about how to call those functions, this is what I would do, as I told you in my comment (don't expect this snippet to work, is only an example):

 function doEverything(link) { // submit integration report document.getElementById('viewIntegrationReport').submit(); // disable link disableDownloadReportLink(link); // enable link after 4 seconds setTimeout( function() { enableDownloadReportLink(link); }, 4000 ); } 

 <a href="#x" id="downloadReportLink" title="This function will provide you a 30 day download of all your eSign transactions." onclick="doEverything(this);"><span>Export E-Sign Information</span></a>