让 preventDefault() 仅持续 200 毫秒 - JavaScript

Question

我有一个链接，我设置了 preventDefault() 方法，因为在链接连接到链接地址之前，我将在链接上制作一个简短的动画。

我的问题是，虽然我正在努力将 preventDefault() 设置为仅持续 200 毫秒。我尝试过使用 setTimeout()，但没有任何乐趣？

基本上在下面的代码中，我希望这样当有人单击锚标记时，200 毫秒内没有任何反应（我实际上会在这 200 毫秒内发生淡出动画，但这样做很容易，这只是时机在我正在努力的 preventDefault() 上）。

代码笔：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>

Answer 1

我想不出preventDefault 然后恢复的方法，但您应该可以在等待 200 毫秒后手动导航：

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);
  })
});

Answer 2

为我工作：

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

你不能真正推迟preventDefault，因为它是同步的——你必须手动强制默认效果。 （另一种选择是创建一个自定义事件以在 200 毫秒内分派给元素，但这需要更多代码）