Javascript 用颜色填充整个像素网格的错误

我用vanilla JS创建了一个像素网格，并添加了擦除和绘制模式。“绘制”模式的唯一作用是返回默认功能，在使用“擦除”模式后单击单元格或在多个单元格之间拖动鼠标指针时，使用颜色填充单元格

如果在选择“绘制模式”后尝试快速绘制，然后执行鼠标悬停/释放鼠标指针，整个网格将被填充，如果尝试单击“提交”以清除网格，则无法工作

我以前遇到过网格填充问题，并用if语句修复了它

if (e.target.tagName === 'TD') {
            e.target.style.backgroundColor = color;
        }

它在控制绘图的默认功能中起作用，即在选择“擦除”或“绘图模式”之前起作用，并将其包含在“绘图模式”的功能中，但它不会阻止填充网格，而且我不确定为什么一旦出现错误，单击“提交”无法清除网格

要查看我的完整代码，请查看我的

以下是我的draw模式函数，它似乎是这些问题的根源：

// Allows user to return to (default) draw mode after using 'erase' button. Note 'down' was set to false in variable above
drawMode.addEventListener('click', function() {
  pixelCanvas.addEventListener('mousedown', function(e) {
    down = true;
    pixelCanvas.addEventListener('mouseup', function() {
        down = false;
    });
    // Ensures cells won't be colored if grid is left while pointer is held down
    pixelCanvas.addEventListener('mouseleave', function() {
      down = false;
    });
    pixelCanvas.addEventListener('mouseover', function(e) {
      const color = document.querySelector('.color-picker').value;
      // While mouse pointer is pressed and within grid boundaries, fills cell with selected color. Inner if statement fixes bug that fills in entire grid
        if (down) {
        if (e.target.tagName === 'TD') {
            e.target.style.backgroundColor = color;
        }
      }
    });
  });
  // Enables single-cell coloring while in draw mode
  pixelCanvas.addEventListener('click', function(e) {
    const color = document.querySelector('.color-picker').value;
    e.target.style.backgroundColor = color;
  });
});

---

如果在错误发生时检查HTML，您将看到正在设置表的背景色，这就是它不可擦除的原因。请尝试使用此选项，以确保要着色的元素是像素td，而不是其他任何内容：

pixelCanvas.addEventListener('click', function(e) {
  if (e.target.tagName !== 'td') return;
  const color = document.querySelector('.color-picker').value;
  // ...