如何禁用a标签按钮并阻止onclick事件？求标准JS实现方案

项目因历史原因使用<a>标签作为按钮，点击部分按钮时需要禁用其他按钮的onclick处理逻辑（包括其发起的API请求）。当前实现可正常运行，但写法不够自然，求更标准的JavaScript处理方式。

现有代码示例 #

HTML

<a class="button button1">BUTTON1</a>
<a class="button button2">DISABLE BUTTON1</a>

CSS

.button { padding: 1em; background-color: #eee; cursor: pointer; }

JavaScript

document.querySelector(".button1").onclick = (e) => {
   if (e.target.disabled)   // .disabled 属性默认未定义，属于自定义属性
       return;
   console.log("button1 clicked");       
   fetch("/api/do_something");
};

document.querySelector(".button2").onclick = () => {
    console.log("button2 clicked");
    document.querySelector(".button1").disabled = true;
};

由于<a>标签本身没有原生的disabled属性，直接自定义disabled属性容易造成语义混淆，同时缺乏直观的视觉反馈。以下是两种更规范的实现方式：

方式一：CSS类标记禁用状态 + 独立事件绑定 #

核心思路是用CSS类（如.disabled）来标记按钮的禁用状态，同时配套样式让用户直观感知，事件处理逻辑中统一判断该类是否存在。

修改后的代码 #

CSS

.button { 
  padding: 1em; 
  background-color: #eee; 
  cursor: pointer; 
  transition: all 0.2s; /* 增加过渡动画，状态切换更自然 */
}
/* 禁用状态样式 */
.button.disabled { 
  background-color: #ccc; 
  cursor: not-allowed; 
  opacity: 0.7; 
}

JavaScript

// 通用判断按钮是否禁用的工具函数
function isDisabled(button) {
  return button.classList.contains('disabled');
}

// 按钮1点击逻辑
document.querySelector(".button1").onclick = (e) => {
  const btn = e.target;
  if (isDisabled(btn)) return;

  console.log("button1 clicked");       
  fetch("/api/do_something");
};

// 按钮2点击逻辑：禁用按钮1
document.querySelector(".button2").onclick = () => {
  console.log("button2 clicked");
  document.querySelector(".button1").classList.add('disabled');
};

方式二：事件委托（适合多按钮场景） #

如果页面中有大量按钮，使用事件委托可以减少事件绑定的数量，提升性能，同时统一管理所有按钮的点击逻辑。

修改后的JavaScript #

document.addEventListener('click', (e) => {
  const targetBtn = e.target;
  // 只处理带有.button类的元素
  if (!targetBtn.matches('.button')) return;

  // 按钮已禁用则直接返回
  if (targetBtn.classList.contains('disabled')) return;

  // 根据按钮类型处理逻辑
  if (targetBtn.matches('.button1')) {
    console.log("button1 clicked");       
    fetch("/api/do_something");
  } else if (targetBtn.matches('.button2')) {
    console.log("button2 clicked");
    document.querySelector(".button1").classList.add('disabled');
  }
});

方案优势 #

1. 语义化更清晰：用CSS类标记禁用状态，避免混淆原生HTML属性的含义
2. 视觉反馈明确：禁用状态配套样式，用户能直观感知按钮不可用
3. 逻辑更易维护：统一的禁用判断逻辑，减少重复代码；事件委托模式更适合批量按钮管理
4. 扩展性更强：后续若需添加更多按钮或禁用逻辑，只需扩展类匹配和处理分支即可

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