像素画项目绘画逻辑问题：鼠标按下绘制/抬起停止功能实现失败

我正在用HTML、CSS和JavaScript开发一个像素画项目，目前卡在绘画机制的实现上。

预期效果：鼠标按下（mousedown）后，移动鼠标时通过mouseover事件绘制像素；鼠标抬起（mouseup）时停止绘制。

最初的代码能实现鼠标经过时绘制像素，但缺少按下/抬起的控制逻辑：

for (let i = 0; i <= pixels.length; i++) {
    pixels[i]?.addEventListener("mouseover", () => {
        pixels[i].setAttribute("style", "background: black");
        console.log("painting");
    })
}

我尝试了两种方案，均无法正常运行，且已确认mouseDown状态是正常的，不清楚问题出在哪。

尝试方案1：

if (mouseDown) {
    pixels.forEach(pixel => {
        pixel.style.background = colorSelector.value;
        pixel.addEventListener("mouseover", function coloring(event) {
            pixel.style.background = colorSelector.value;
            if (!mouseDown) {
                pixel.removeEventListener("mouseover", coloring);
            }
        })
    })
}

尝试方案2：

pixels.forEach(pixel => {
    if (mouseDown) {
        // 给点击的第一个像素上色
        pixel.style.background = colorSelector.value;
        pixel.addEventListener("mouseover", function coloring(event) {
            pixel.style.background = colorSelector.value;

            if (!mouseDown) {
                // 鼠标抬起时移除上色事件
                pixel.removeEventListener("mouseover", coloring);
            }
        })
    }
})

问题分析与修复方案 #

你的两种方案核心逻辑有误：

1. 方案1里的if(mouseDown)仅在代码初始化时判断一次，不会实时响应鼠标状态变化；而且直接给所有像素上色、绑定事件，完全不符合“按下后移动才绘制”的需求。
2. 方案2同样是初始化阶段判断mouseDown，如果初始状态是未按下，事件根本不会绑定，自然无法工作。

正确的实现思路：

• 全局维护一个isDrawing状态变量，默认设为false。
• 在文档（或画布容器）上监听mousedown和mouseup事件，实时切换isDrawing的状态。
• 给每个像素绑定mouseover事件，回调里判断isDrawing是否为true，是则上色；同时绑定mousedown事件，处理点击单个像素上色的场景（仅靠mouseover可能无法触发点击第一个像素的操作）。

修复后的代码示例：

// 初始化绘制状态
let isDrawing = false;
// 假设你的颜色选择器和像素元素选择器如下
const colorSelector = document.querySelector('#color-selector');
const pixels = document.querySelectorAll('.pixel');

// 全局监听鼠标按下/抬起，控制绘制开关
document.addEventListener('mousedown', () => {
    isDrawing = true;
});
document.addEventListener('mouseup', () => {
    isDrawing = false;
});

// 给每个像素绑定事件
pixels.forEach(pixel => {
    // 鼠标经过时，若处于绘制状态则上色
    pixel.addEventListener('mouseover', () => {
        if (isDrawing) {
            pixel.style.backgroundColor = colorSelector.value;
        }
    });

    // 点击像素时直接上色（处理点击第一个像素的场景）
    pixel.addEventListener('mousedown', () => {
        pixel.style.backgroundColor = colorSelector.value;
    });
});

额外优化 #

• 用style.backgroundColor代替setAttribute("style")，避免覆盖像素原有样式。
• 可添加mouseleave监听，防止鼠标移出画布后抬起再返回仍能绘制的问题：

document.addEventListener('mouseleave', () => {
    isDrawing = false;
});

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