如何通过addEventListener检测按钮点击？禁用按钮点击触发提示

1. 检测按钮是否被点击（替代onclick判断） #

用addEventListener绑定的事件不会同步到元素的onclick属性上，所以直接读取button.onclick会返回undefined。你可以自己维护一个状态变量来追踪点击状态：

// 初始化点击状态
let isButtonClicked = false;
const targetBtn = document.getElementById('your-button-id');

// 绑定原有点击事件
targetBtn.addEventListener('click', run);

function run() {
  // 标记按钮已被点击
  isButtonClicked = true;
  // 这里放你原本的run函数逻辑
  console.log('按钮触发点击逻辑');
}

// 后续需要判断点击状态时，直接使用这个变量
if (isButtonClicked) {
  console.log('按钮已经被点击过');
}

2. 禁用按钮时点击弹出提示 #

按钮设置disabled=true后，浏览器默认不会触发它的click事件，直接给按钮绑定事件无效。可以用事件委托，在父元素或document层面监听点击，判断目标是否为禁用状态的按钮：

// 选择按钮的父元素（或直接用document）
const btnContainer = document.getElementById('btn-container');

btnContainer.addEventListener('click', (e) => {
  // 校验点击目标是目标按钮，且处于禁用状态
  if (e.target.id === 'your-button-id' && e.target.disabled) {
    alert('按钮暂时禁用，请X分钟后再试');
  }
});

// 按钮禁用逻辑示例
function disableButtonFor(minutes) {
  targetBtn.disabled = true;
  setTimeout(() => {
    targetBtn.disabled = false;
  }, minutes * 60 * 1000);
}

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