如何让preventDefault()仅生效200ms？JavaScript技术问询

我来帮你搞定这个问题！你遇到的核心问题是：阻止默认跳转后，浏览器不会自动帮你“恢复”跳转行为——得我们手动在定时器结束后触发跳转才行。下面是具体的实现方案，分原生JS和jQuery两种场景：

1. 拦截链接的默认点击行为（preventDefault()）
2. 执行你的淡出动画
3. 200ms后，手动读取链接的href和target属性，触发页面跳转

原生JavaScript实现 #

// 给需要动画的链接绑定事件（建议给这类链接加个专属类，比如animate-link）
document.querySelectorAll('a.animate-link').forEach(link => {
  link.addEventListener('click', function(e) {
    // 1. 阻止默认跳转
    e.preventDefault();
    
    // 2. 提前保存链接的关键属性（定时器回调里this指向会变）
    const linkHref = this.href;
    const linkTarget = this.target;
    
    // 3. 执行淡出动画（这里以body为例，你可以换成目标元素）
    document.body.classList.add('fade-out');
    
    // 4. 200ms后手动触发跳转
    setTimeout(() => {
      if (linkTarget === '_blank') {
        // 处理新窗口打开的情况
        window.open(linkHref, linkTarget);
      } else {
        // 当前窗口跳转
        window.location.href = linkHref;
      }
      
      // 可选：动画结束后移除类（如果后续还有其他场景需要用到）
      document.body.classList.remove('fade-out');
    }, 200);
  });
});

对应的CSS动画示例：

.fade-out {
  opacity: 0;
  transition: opacity 0.2s ease-out; /* 时长和定时器时间保持一致 */
}

jQuery实现（如果项目用了jQuery） #

// 同样建议用专属类筛选需要处理的链接
$(document).on('click', 'a.animate-link', function(e) {
  e.preventDefault();
  
  const $link = $(this);
  const linkHref = $link.attr('href');
  const linkTarget = $link.attr('target');
  
  // 执行动画
  $('body').addClass('fade-out');
  
  setTimeout(() => {
    if (linkTarget === '_blank') {
      window.open(linkHref, linkTarget);
    } else {
      window.location.href = linkHref;
    }
    
    $('body').removeClass('fade-out');
  }, 200);
});

• 匹配动画时长：确保CSS过渡的时长和setTimeout的时间完全一致，这样动画结束刚好跳转，体验更流畅。
• 动态链接处理：如果链接是AJAX动态生成的，一定要用事件委托（比如上面jQuery的$(document).on()写法，原生JS则绑定事件到父元素或document）。
• 不要全局拦截所有链接：给需要动画的链接加专属类，避免影响其他不需要动画的跳转（比如下载链接、外部链接等）。

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