Have preventDefault() last for 200ms only - JavaScript

Question

I have a link that I have set a preventDefault() method on, because I'm going to have a short animation on the link before it connects to the link address.

My problem is though I'm struggling how to set a preventDefault() to last for 200ms only. I've tried using setTimeout(), but I didn't have any joy?

Basically in the code below I'd like it so that when someone clicks the anchor tag nothing happens for 200ms (I will actually have a fade out animation happen during these 200ms, but doing that is easy enough, it's just the timing on the preventDefault() that I'm struggling with).

CodePen: https://codepen.io/emilychews/pen/BrRZbX

window.addEventListener("load", function(){
  
  var link = document.getElementById("link");
  
  link.addEventListener("click", function(e){
     e.preventDefault();
    
  })
  
});

body {
      margin: 0; 
      display: flex; 
      justify-content: center; 
      align-items: center; 
      width: 100%; 
      height: 100vh;
     }

<a target="_blank" href="https://www.google.com" id="link">Google</a>

Check [this](https://stackoverflow.com/questions/7732854/is-there-a-universal-way-to-invoke-a-default-action-after-calling-event-preven) out, I think it may answer your question. — Alexander Nied, Mar 22 '18 at 01:32

CertainPerformance · Answer 1 · 2018-03-22T01:53:38.617

2

Worked for me:

e.preventDefault();
setTimeout(() => window.location = link.href, 200);

You can't really defer the preventDefault because it's synchronous - you'll have to force the default effect manually. (another option would be to create a custom event to dispatch to the element in 200ms, but that requires a lot more code)

edited Mar 22 '18 at 01:53

answered Mar 22 '18 at 01:33

CertainPerformance

356,069
52
309
320

Sorry I've made a mistake here, I shouldn't have put the target="blank" in. How do I get it work in the same window? – pjk_ok Mar 22 '18 at 01:45
This and the other person's answer don't work. The delay happens for 200ms, and my small animation happens within this, but the link doesn't go to the `href="//localhost:8888/mysite/index.html" The address displayed in the browser is `localhost:8888/mysite/undefined` and i get a page not found error? – pjk_ok Mar 22 '18 at 13:32
@TheChewy Whatever's causing that bug is outside of the code you've posted here. Presumably, whatever's generating your `href`s is not working properly. – CertainPerformance Mar 22 '18 at 19:53
No, your code was wrong. It should have been `e.target.href` – pjk_ok Mar 23 '18 at 14:10
I was assuming that your `var link = document.getElementById("link");` (as defined in the codepen) was the element you were looking for - in which case `link.href` would work - you'd only need `e.target` if your code was fundamentally different from what you actually posted. – CertainPerformance Mar 23 '18 at 17:20

charmeleon · Accepted Answer · 2018-03-23T00:32:21.847

2

I can't think of a way to preventDefault and then resume, but you should be able to navigate manually after a 200ms wait:

window.addEventListener("load", function(){

  var link = document.getElementById("link");

  link.addEventListener("click", function(e){
     e.preventDefault();
     setTimeout(() => {
         // if you want to open in a new window
         window.open(e.target.href);
         // if you want to navigate away (same window)
         window.location = e.target.href;
     }, 200);
  })
});

edited Mar 23 '18 at 00:32

answered Mar 22 '18 at 01:35

charmeleon

2,693
1
20
35

He did want `target="_blank"` though, so he probably wants a new window. – CertainPerformance Mar 22 '18 at 01:36
No `target="blank"` isn't necessary, I only put that in so the link actually opened so to speak. I didn't get to see your previous answer on how do it in the same window :( – pjk_ok Mar 22 '18 at 01:42
I added it back, make sure to use only one of the two options though – charmeleon Mar 22 '18 at 01:45
Beware with the window.open: UAs will block it if it doesn't come from a trusted user event (like a click), and adding the timeout will make it out of this trusted event. – Kaiido Mar 22 '18 at 03:31
Neither of these work? The delay happens for 200ms, and my small animation happens within this, but the link doesn't go to the `href="//localhost:8888/mysite/index.html" The address displayed in the browser is `localhost:8888/mysite/undefined` and i get a page not found error? – pjk_ok Mar 22 '18 at 13:31
I updated it to use `e.target.href` instead of `this.href`. If that still doesn't work, check that the link has a valid URL that you could copy+paste to the address bar in your browser – charmeleon Mar 23 '18 at 00:33
Thanks @chameleon that works now. When I said both answers weren't working I meant yours and the other persons. When it opened as a new window it did work in that context. But thanks again for providing the solution to the secondary problem, much appreciated. – pjk_ok Mar 23 '18 at 14:12

Have preventDefault() last for 200ms only - JavaScript

2 Answers2