禁用按钮并阻止 onclick 处理程序

Question

我有一些按钮（

<a>

标签用于项目的历史原因），单击其中一些按钮应该禁用其他按钮的单击处理程序（以及它们发送的API请求）。

这有效，但不确定它是否真的自然。

有没有更标准的JS方式来处理这种情况？

document.querySelector(".button1").onclick = (e) => {
   if (e.target.disabled)   // .disabled attribute is undefined by default
       return;
   console.log("button1 clicked");       
   fetch("/api/do_something");
};

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

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

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

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

Answer 1

使用@Teemu的评论：

document.querySelector(".button1").onclick = (e) => {
   console.log("button1 clicked");       
   fetch("/api/do_something");
};
document.querySelector(".button2").onclick = () => {
    console.log("button2 clicked");
    document.querySelector(".button1").classList.add("disabled");
};

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

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