Question

我使用vanilla JS创建了一个像素网格，并添加了擦除和绘制模式。绘制模式的唯一要点是在使用擦除模式后返回默认功能（在单击一个单元格时填充单元格或在拖动多个单元格时按下鼠标指针按钮）。

如果您在选择绘图模式后尝试快速绘图，然后执行鼠标指针的鼠标注释，释放整个网格，如果您尝试单击“提交”。清除网格，它不起作用。

之前我遇到了网格填充问题并使用if语句修复了

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

在默认函数控制绘图中工作（即，在选择擦除或绘制模式之前有效），并将其包含在绘制模式的函数中，但它不会阻止网格被填充，而且我不确定为什么点击提交＆＃39;一旦发生错误，它不会清除网格。

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

这是我的绘图模式功能，似乎是这些问题的根源：

// 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;
  });
});

Answer 1

如果您在发生错误时检查HTML，您会看到表的背景颜色正在设置，这就是为什么它不是擦写。请尝试使用此功能，以确保要着色的元素是像素（td），而不是其他任何内容：

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

使用颜色

1 个答案: