Question

我有这个for循环，假设在发生鼠标事件但只有click事件起作用时，它会创建单元格并添加背景色。您认为问题是什么？这段代码的全部目的是创建一个表格网格，并能够为目标单元格添加颜色以制作像素艺术作品。

const grid = document.getElementById('submit');
const inputH = document.getElementById('inputHeight');
const inputW = document.getElementById('inputWidth');
const table = document.getElementById('pixelCanvas');
const color = document.getElementById('colorPicker');

grid.addEventListener('click', function (e) {
  table.innerHTML = "";
  makeGrid();
  e.preventDefault();
});

//Create Grid
function makeGrid() {

  for (let i = 0; i < inputH.value; i++) {
    let tr = table.insertRow(i);

    for (let j = 0; j < inputW.value; j++) {
      cell = tr.insertCell(j);

      // adding color to cells from the color picker

      cell.addEventListener('click', function (e) {
        e.target.style.backgroundColor = color.value;
      });

      cell.addEventListener('mousedown', function (e) {
        e.target.style.backgroundColor = color.value;
      });
    }
  }
}

Answer 1

如果鼠标按下和单击事件具有不同的颜色，则可以看到正在发生的事情：

cell.addEventListener('click', function (e) {
    e.target.style.backgroundColor = color.value;
  });

  cell.addEventListener('mousedown', function (e) {
    e.target.style.backgroundColor = hoverColor.value;
  });

to this post

鼠标事件不起作用

1 个答案: