嘿，这个问题我之前也碰到过！核心原因是你只停止了按钮图片的绘制，但按钮的点击判定逻辑还在生效——它的点击区域并没有被禁用，所以点击原来的位置还是会触发绑定的代码。给你一套完整的解决思路：

1. 给Button对象添加激活状态标记 #

首先，给你的Button实例加一个状态属性，用来控制它是否可交互和可绘制。比如在构造函数里新增：

function Button(x, y, w, h) {
  this.x = x;
  this.y = y;
  this.width = w;
  this.height = h;
  this.isActive = true; // 默认是激活状态，可点击可绘制
  // 其他原有属性...
}

2. 修改draw()方法，只绘制激活的按钮 #

在你的绘制逻辑里，只有当按钮处于激活状态时，才绘制对应的图片：

function draw() {
  // 其他画布绘制逻辑...
  
  ctx.beginPath();
  const img = document.getElementById('btn');
  if (btn.isActive) { // 仅激活时绘制图片
    ctx.drawImage(img, btn.x, btn.y, btn.width, btn.height);
  }
  
  // 其他画布绘制逻辑...
}

3. 给点击检测加状态判断 #

找到你处理鼠标点击的代码（比如canvas的click事件监听），只有按钮处于激活状态时，才响应点击：

canvas.addEventListener('click', (e) => {
  const rect = canvas.getBoundingClientRect();
  const clickX = e.clientX - rect.left;
  const clickY = e.clientY - rect.top;

  // 先判断按钮是否激活，再判断点击是否在按钮区域内
  if (btn.isActive && 
      clickX >= btn.x && clickX <= btn.x + btn.width &&
      clickY >= btn.y && clickY <= btn.y + btn.height) {
    // 执行按钮绑定的业务逻辑
    btn.isActive = false; // 点击后立即禁用按钮
    // 其他点击后的处理...
  }
});

4. 重新激活按钮的方法 #

当你需要让按钮再次可用时，只需要重置它的激活状态：

function reEnableButton() {
  btn.isActive = true;
}

这样处理后，按钮在非激活状态下，既不会被绘制出来，也不会响应任何点击操作，完全符合你的预期。

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