Delay click event on <a> element

Question

Is there a way to hold the execution of the default action of a click even trigger on an <a> element and resume it later?

I specifically do not mean cancelling the event and rewriting it later, as in:

 document.getElementsByTagName("a")[0].addEventListener("click", function(event){ var url = this.getAttribute("href"); var target = this.getAttribute("target"); event.preventDefault(); setTimeout(function(){ console.log("TODO: open " + url + " in " + target); }, 1000); }); 

 <a href="http://example.com" target="_blank">Click me!</a> 

… neither triggering a brand new click:

 var delayed = false; document.getElementsByTagName("a")[0].addEventListener("click", function(event){ var link = this; if (!delayed) { event.preventDefault(); setTimeout(function(){ link.click(); }, 1000); delayed = true; } }); 

 <a href="http://example.com" target="_blank">Click me!</a> 

 function cloneEvent(event) { return Object.setPrototypeOf(new Event(event.type), event); } var delayed = false; document.getElementsByTagName("a")[0].addEventListener("click", function(event){ var newEvent = cloneEvent(event); if (!delayed) { event.preventDefault(); setTimeout(function(){ event.target.dispatchEvent(newEvent); }, 1000); delayed = true; } }); 

 <a href="http://example.com" target="_blank">Click me!</a> 

Why not?

1. Rewriting means you need to reinvent everything the browser would you (error prone and time consuming).

2. Triggering means it's no longer a user-initiated event (eg popup blocker) and the event cloning version doesn't even work.

3. I'm curious (main reason).

I get the impression that Event.preventDefault() puts the event in a final state. Am I correct? Is it just not possible?

Answer 1

On the link set href='about:blank' which qualifies as a genuine user click and then add data-href= url . The eventListener passes the data-href value through to a function wrapped in an anonymous function which is set Timed out . The function activateLink() uses location.href to open the link.

Demo

 var lnx = document.links; lnx[0].addEventListener('click', delayClick, false); lnx.jsi.addEventListener('click', delayClick, false); lnx.so.addEventListener('click', delayClick, false); function delayClick(e) { let destination = this.dataset.href; setTimeout(function(e) { activateLink(destination) }, 1000); } function activateLink(destination) { location.href = destination; } 

 a { display:block; margin: 10px 0; } 

 <a href='about:blank' data-href='https://example.com' target='_blank'>EXAMPLE</a> <a id='jsi' href='about:blank' data-href='https://javascript.info' target='_blank'>JAVASCRIPT.INFO</a> <a name='so' href='about:blank' data-href='https://stackoverflow.com' target='_blank'>STACKOVERFLOW</a>