如何实现JS禁用时走href跳转、启用时触发onclick自定义跳转

你要的效果用原生a标签的默认行为配合事件拦截就能实现，不需要额外兼容库，逻辑可靠性很高：

• 基础标签写法
  不要用空href、javascript:void(0)或者div/span模拟链接，直接写标准a标签，把真实目标地址填到href属性里，这是无JS环境下可正常跳转的核心前提：

  <a href="/your-target-page" class="transition-jump">跳转至目标页</a>
  

• 自定义JS逻辑绑定
  给对应链接绑定点击事件，触发时首先拦截a标签的默认即时跳转行为，再执行你原有的过渡动画、延迟跳转逻辑即可：

  const jumpLinks = document.querySelectorAll('.transition-jump');
  jumpLinks.forEach(link => {
    link.addEventListener('click', function(event) {
      // 拦截默认的即时跳转行为
      event.preventDefault();
      const targetUrl = this.href;
      // 这里替换为你自己的过渡动画执行逻辑
      playPageTransition();
      // 匹配动画实际时长，延迟后执行跳转
      setTimeout(() => {
        window.location.href = targetUrl;
      }, 600); // 数值替换为你实际需要等待的毫秒数
    });
  });
  

效果说明 #

• JS禁用场景：浏览器不会执行绑定的点击事件，点击链接会直接触发原生默认行为，读取href属性完成正常跳转，不存在功能失效问题。
• JS启用场景：点击后优先触发绑定的自定义函数，默认跳转被拦截，会按照你设定的逻辑先播放过渡动画，等待指定时长后再完成跳转，和你原本的交互效果完全一致。

补充说明：如果有部分链接需要新标签打开（带target="_blank"属性），这个逻辑同样兼容，只需要在JS判断下target属性，跳转时对应改用window.open处理即可。

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