如何实现页面加载后前10秒禁用链接，之后恢复正常可点击状态？

这里提供几种实用的实现方式，根据你的场景选择即可：

方法一：JavaScript + CSS 组合（推荐，兼顾兼容性与用户体验） #

通过添加禁用类实现视觉提示，同时用JS控制点击拦截与恢复，兼容性更好。

第一步：定义禁用样式 #

在CSS中添加链接禁用状态的样式，给用户明确的视觉反馈：

.link-disabled {
  pointer-events: none; /* 阻止点击交互 */
  opacity: 0.6; /* 降低透明度表示不可用 */
  cursor: not-allowed; /* 鼠标显示禁止样式 */
}

第二步：JS控制状态切换 #

页面加载完成后，给所有链接添加禁用类，10秒后移除并解除点击拦截：

document.addEventListener('DOMContentLoaded', function() {
  const links = document.querySelectorAll('a');
  
  // 初始化：禁用所有链接
  links.forEach(link => {
    link.classList.add('link-disabled');
    // 兼容不支持pointer-events的旧浏览器，手动阻止点击
    link.addEventListener('click', blockClick, true);
  });

  // 10秒后恢复链接功能
  setTimeout(() => {
    links.forEach(link => {
      link.classList.remove('link-disabled');
      link.removeEventListener('click', blockClick, true);
    });
  }, 10000);

  // 阻止点击的辅助函数
  function blockClick(e) {
    e.preventDefault();
    e.stopPropagation();
  }
});

方法二：纯JavaScript实现（简洁无额外CSS） #

直接通过事件委托拦截点击，适合不需要视觉提示的场景：

document.addEventListener('DOMContentLoaded', function() {
  let isLinksDisabled = true;

  // 全局拦截链接点击
  document.addEventListener('click', function(e) {
    if (isLinksDisabled && e.target.tagName === 'A') {
      e.preventDefault();
      e.stopPropagation();
    }
  }, true);

  // 10秒后解除拦截
  setTimeout(() => {
    isLinksDisabled = false;
  }, 10000);
});

方法三：纯CSS实现（极简，兼容性稍差） #

利用CSS动画延迟特性，前10秒保持禁用状态，适合对兼容性要求不高的场景：

a {
  /* 前10秒保持禁用样式，10秒后执行动画恢复 */
  animation: enableLinks 0s linear 10s forwards;
  pointer-events: none;
  opacity: 0.6;
  cursor: not-allowed;
}

@keyframes enableLinks {
  to {
    pointer-events: auto;
    opacity: 1;
    cursor: pointer;
  }
}

注意事项 #

• 若页面存在动态生成的链接，建议用事件委托方式处理（参考方法二的全局监听逻辑），避免遗漏新添加的链接。
• 不要尝试给<a>标签加disabled属性，HTML标准中链接标签不支持该属性，设置后不会生效。

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