Javascript-处理鼠标拖动事件

我是JavaScript新手，我创建了一个着色网格

应该可以通过拖动鼠标来绘制图像，但事实并非如此。无论何时单击单元格，都会开始拖动。应激活鼠标移动到的所有单元格，并使用选定的颜色着色

释放鼠标后，拖动停止，鼠标移动不再激活单元格。

这是我的代码，但我只能在单击鼠标时执行：

var td = document.querySelectorAll('#my-table td');
td.forEach(e => e.addEventListener("click", function() {
    if(this.style.backgroundColor =="" || this.style.backgroundColor =="white"){
    this.style.backgroundColor = selectedColor;
    }
    else{
        this.style.backgroundColor = "white";
    }
}));

---

尝试使用mousemove和mouseup/mousedown事件在Javascript中检查鼠标的状态

所以首先检查网格中的mousedown事件，然后检查mousemove

当发生mouseup事件时，您可以检查网格并执行操作

参考文献 我解决了它

var isClicked = false;

window.addEventListener('mousedown', e => {

  isClicked = true;
});


window.addEventListener('mouseup', e => {
  if (isClicked === true) {
    isClicked = false;
  }
});
//do{
td.forEach(e => e.addEventListener("mousemove", function() {
    // Here, `this` refers to the element the event was hooked on
if (isClicked === true) {
    this.style.backgroundColor = selectedColor;
}

}));
td.forEach(e => e.addEventListener("click", function() {
    // Here, `this` refers to the element the event was hooked on

    if(this.style.backgroundColor =="" || this.style.backgroundColor =="white"){
    this.style.backgroundColor = selectedColor;
    }
    else{
        this.style.backgroundColor = "white";
    }

}));

---

请向我们展示您失败的尝试。也就是说，你肯定不是从最简单的任务开始学习JS:-）我尝试使用mousedown和mouseup事件，但我不知道如何告诉他为所选单元格着色。因为this.style.backgroundColor=selectedColor；是老鼠唯一的牢房。如何保存所有选定的表格单元格以对其进行着色？每当单元格鼠标悬停时，您可以立即为每个单元格应用颜色样式。这就是我们的想法。所以试着为每个单元格附加addEventListener（“mouseover”），函数（事件）并执行操作。你们可以在这里找到类似的示例。