使用JavaScript实现指定类名按钮onclick事件的禁用与恢复

原代码核心问题 #

• 语法错误：document.getElementsByClassName 返回的是类数组的HTMLCollection集合，不是单个DOM元素，循环内没有取下标对应的元素，stb.onclick 是给集合本身加了无效的onclick属性，完全没有作用到单个按钮上。
• 逻辑错误：直接把 onclick 赋值为 null 会直接清除原有绑定的事件处理函数，后续赋值为true完全无效——onclick属性要求的值是函数，布尔值不能作为点击事件的处理逻辑，原有事件被清除后无法恢复。
• 兼容性问题：如果按钮点击事件是用 addEventListener 绑定的，修改onclick内置属性完全不会影响这部分事件绑定，点击依然会触发逻辑。

最优解决方案 #

不需要修改事件绑定，直接操作按钮原生disabled属性即可，浏览器会默认禁止disabled状态的按钮触发任何点击事件：

// 禁用所有匹配类名的按钮
const stb = document.getElementsByClassName("btn-st");
for (let i = 0; i < stb.length; i++) {
    stb[i].disabled = true;
}

// 这里执行你的业务逻辑
// ...

// 逻辑执行完成后重新启用按钮
for (let i = 0; i < stb.length; i++) {
    stb[i].disabled = false;
}

特殊场景方案（不能使用disabled属性时） #

如果确实要通过控制onclick事件实现效果，需要提前存储原有事件处理函数再恢复：

const stb = document.getElementsByClassName("btn-st");
// 存储原有onclick事件的数组
const originClickHandlers = [];
for (let i = 0; i < stb.length; i++) {
    originClickHandlers.push(stb[i].onclick);
    // 临时替换为空函数，阻止点击触发逻辑
    stb[i].onclick = () => {};
}

// 执行业务逻辑
// ...

// 恢复原有事件
for (let i = 0; i < stb.length; i++) {
    stb[i].onclick = originClickHandlers[i];
}

注：如果事件是通过addEventListener绑定的，以上onclick操作无效，优先推荐使用disabled属性实现需求。

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