JavaScript实现鼠标拖拽绘制像素画板的问题求助

核心思路是通过一个状态变量控制绘画状态，配合mousedown、mouseover和mouseup事件实现点击上色+拖拽连续上色的效果，同时避免重复绑定事件导致的异常：

1. 定义状态变量标记是否处于绘画模式

let isDrawing = false;

2. 给所有像素盒子绑定事件，替换你原来的代码：

const pixelBoxes = document.querySelectorAll(".PixelBoxes");

pixelBoxes.forEach(element => {
  // 鼠标按下：开始绘画，同时给当前像素上色
  element.addEventListener("mousedown", (e) => {
    e.preventDefault(); // 避免浏览器默认选中行为干扰
    isDrawing = true;
    element.style.backgroundColor = colorPicker.color.hexString;
  });

  // 鼠标经过：只有处于绘画状态时才上色
  element.addEventListener("mouseover", () => {
    if (isDrawing) {
      element.style.backgroundColor = colorPicker.color.hexString;
    }
  });
});

// 全局监听鼠标抬起：无论鼠标在哪个区域抬起，都停止绘画
document.addEventListener("mouseup", () => {
  isDrawing = false;
});

为什么你的原方案出问题？ #

你之前在click事件里嵌套绑定mouseover，每次点击都会给所有像素重复添加mouseover事件，而且没有移除逻辑，这些事件会一直存在，导致鼠标松开后仍持续上色。用状态变量的方式只需要绑定一次事件，通过状态开关控制上色逻辑，既高效又符合预期。

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