为何设置为disabled的链接仍可点击？

云原生阿岚

2026-8-18

解决禁用链接仍可点击的问题

你遇到的核心问题是：HTML的<a>标签没有原生的disabled属性，单纯靠CSS设置cursor: not-allowed只是改变了视觉反馈，完全不会阻止链接的点击跳转行为。

具体解决方案

要彻底禁用链接，需要结合「标记类 + CSS视觉样式 + JS阻止事件」三个步骤：

给需要禁用的链接添加自定义类
在你的HTML里，给那些要禁用的<a>标签加上class="disabled-link"，比如：

<li class="suboption"><a href="#" title="Gaurav Tiwari" class="disabled-link">Gaurav Tiwari <span class="cross">&#8225;</span></a></li>
<li class="suboption"><a href="http://chernobrov.narod.ru/" target="_blank" title="Vadim Chernobrov" class="disabled-link">Vadim Chernobrov <span class="cross">&#8225;</span></a></li>

添加CSS视觉样式
在你的CSS里新增以下规则，既设置光标，也通过pointer-events: none尝试阻止点击（注意这个属性在旧浏览器可能失效，所以需要JS兜底）：
```
ul#navbar a.disabled-link {
  cursor: not-allowed;
  opacity: 0.6; /* 增加透明度，明确提示不可点击 */
  pointer-events: none;
}
```

用JS阻止默认跳转行为
为了兼容所有浏览器，添加一段JavaScript代码，强制阻止禁用链接的点击跳转：

document.addEventListener('DOMContentLoaded', function() {
  const disabledLinks = document.querySelectorAll('a.disabled-link');
  disabledLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止链接跳转
    });
  });
});