Javascript - обрабатывать событие перетаскивания мышью

Question

Я новичок в 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";
    }
}));

Answer 1

Я решил это.

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";
    }

}));

Answer 2

Попробуйте использовать события mousemove и mouseup / mousedown для проверки состояния мыши в Javascript.

Поэтому сначала проверьте событие mousedown в сетке, а затем проверьте mousemove.

Когда происходит событие mouseup, Вы можете проверить сетку и выполнить действие.

Ссылка mousemove mouseup / mousedown