如何暂停<a>元素点击事件的默认行为并后续恢复执行？

首先得明确一点：原生 JS 事件模型里并没有直接“暂停”事件默认行为、之后再恢复执行的官方 API。一旦你调用了event.preventDefault()，当前这次点击事件的默认跳转行为就被彻底取消了，没办法再让浏览器回头执行它。不过我们可以用一些技巧模拟出“暂停后恢复”的效果，而且能让浏览器自己处理原生跳转逻辑，不是手动写window.open那种替代方案。

核心思路：阻止当前事件，后续重新触发原生点击 #

我们可以通过一个标志位控制事件处理逻辑：第一次点击时阻止默认行为，完成异步操作后，重新触发元素的点击事件，这次让默认行为正常执行。

举个具体的代码示例：

const targetLink = document.querySelector("a");
let shouldTriggerDefault = false;

targetLink.addEventListener("click", function(event) {
  // 如果不是标记为允许的情况，就阻止默认行为
  if (!shouldTriggerDefault) {
    event.preventDefault();
    
    // 模拟你需要等待的异步操作（比如接口请求、动画完成等）
    setTimeout(() => {
      console.log("等待完成，现在恢复跳转");
      // 标记允许默认行为
      shouldTriggerDefault = true;
      // 重新触发点击事件，这次会执行原生跳转
      this.click();
      // 重置标志位，避免下次点击直接跳过阻止逻辑
      shouldTriggerDefault = false;
    }, 1000);
  }
});

为什么这个方案更贴近需求？ #

和你示例里手动处理href和target的方式不同，这个方法是让浏览器自己处理原生的跳转逻辑：

• 不管是_blank打开新标签页、_self在当前页跳转，还是mailto、download这类特殊链接，都能完美适配，不需要自己写额外逻辑
• 浏览器会保留原生的跳转行为（比如历史记录、新标签页的默认行为等）

注意事项 #

1. 标志位的重置：一定要记得在触发点击后重置标志位，否则下次点击会直接执行默认行为，跳过阻止逻辑
2. 异步操作的兼容性：如果你的等待逻辑是异步的（比如Promise），可以用async/await来改写，逻辑会更清晰：

const targetLink = document.querySelector("a");
let isProcessing = false;

targetLink.addEventListener("click", async function(event) {
  if (!isProcessing) {
    event.preventDefault();
    isProcessing = true;
    
    // 模拟异步请求
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    console.log("异步操作完成，恢复跳转");
    this.click();
    isProcessing = false;
  }
});

3. 事件冒泡的影响：如果父元素有点击事件监听，重新触发的点击会再次触发冒泡，如果你不需要这个行为，可以在重新触发时使用event.stopPropagation()，或者用dispatchEvent手动构造事件并控制冒泡：

// 替代this.click()的方式，更精细控制事件
const clickEvent = new MouseEvent("click", {
  bubbles: false,
  cancelable: true
});
this.dispatchEvent(clickEvent);

总结一下：原生没有“暂停恢复”的直接方法，但通过阻止当前事件+后续重新触发原生点击的方式，就能模拟出你想要的效果，而且完全利用浏览器的原生行为，不需要自己重写跳转逻辑。

内容的提问来源于stack exchange，提问作者Álvaro González