如何在2秒后解除a标签点击事件的preventDefault()阻止跳转效果

你之前尝试移除.link类名没有生效，本质是两个逻辑误区：

• 首次执行的document.querySelectorAll(".link")是页面加载时的元素快照，事件监听器是直接绑定在DOM元素实体上的，和元素是否带有link类没有任何关联
• 移除类名既不会删除已经绑定的点击监听器，也不会让监听器的逻辑失效，自然无法解除跳转阻止。

方案1：精准解绑已绑定的事件监听器（最简洁无冗余） #

当初绑定监听器时如果使用匿名函数，是没法通过removeEventListener精准匹配移除的，只需要把阻止默认行为的处理函数单独定义为具名函数，2秒后直接从元素上移除该监听器即可。
修改后的完整JS逻辑：

// 独立定义阻止默认的处理函数，方便后续精准匹配移除
function preventLinkJump(e) {
  e.preventDefault();
}

// 初始获取所有目标链接，绑定阻止逻辑
const targetLinks = document.querySelectorAll(".link");
targetLinks.forEach(link => {
  link.addEventListener("click", preventLinkJump);
});

// 2秒后统一移除所有链接上的阻止逻辑
setTimeout(() => {
  targetLinks.forEach(link => {
    link.removeEventListener("click", preventLinkJump);
  });
}, 2000);

该方案的优势是完全没有常驻的冗余逻辑，解绑后链接和原生a标签的行为完全一致，无额外性能损耗。

方案2：状态标记控制（适合需要反复切换阻止/放行状态的场景） #

不需要反复绑定、解绑DOM监听器，用一个独立的标记变量记录当前是否需要阻止跳转，监听器内部根据标记值判断要不要执行preventDefault，2秒后直接修改标记值即可放行。
代码示例：

// 状态标记：默认开启跳转阻止
let isJumpBlocked = true;

const targetLinks = document.querySelectorAll(".link");
targetLinks.forEach(link => {
  link.addEventListener("click", function(e) {
    // 仅当标记为开启时才阻止默认跳转
    if (isJumpBlocked) {
      e.preventDefault();
    }
  });
});

// 2秒后关闭阻止状态，放行链接跳转
setTimeout(() => {
  isJumpBlocked = false;
}, 2000);

该方案不需要重复操作DOM事件绑定，如果后续需要重新开启跳转阻止，只要修改isJumpBlocked的取值即可，灵活性更高。

内容的提问来源于stack exchange，提问作者pjk_ok