Проблема с Mousedown Event застрял ⇐ Javascript

[Anonymous]

Итак, я создавал программу Etch-a-Sketch в соответствии с учебной программой TheodinProject. Я работал над этим в течение нескольких дней, и это было немного сложно, так как я нуб, когда дело доходит до кодирования, но я смог выяснить большинство вещей. Тем не менее, в настоящее время у меня есть проблема с проектом, которую я просто не могу выяснить или найти решение нигде, поэтому я подумал, что спрошу здесь. Я включил эту функцию ниже. Я также включил эту функцию ниже. Я сделал это, используя комбинацию слушателей Mousedown, MouseUp и MouseOver, чтобы определить, нажимают ли мышь и удерживают или нет. Это не обрабатывает событие MouseUp должным образом. Когда я перетаскиваю его через сетку в доходах, чтобы продолжать менять цвет плитки. Кажется, это действительно происходит только когда я делаю это быстро (щелкните плитку и быстро перетаскивает курсор на другую плитку, тогда, кажется, застрянет, и слушатель событий MouseUp не работает). < /P>
Изначально у меня просто были слушатели Mousedown и Mouseover и думали, что это было бы достаточно, но когда я не испытал экспериментирования, которые, по -видимому, в различных событиях. Окончательный результат, который я в настоящее время нахожусь, - это объявление переменной «IsmouseDown», установленной для False, а затем для использования слушателей событий, чтобы изменить ее на True, когда мышь на самом деле снижается для немного более точности, но она все еще не будет работать. (или не работать) и поиграйте с ним, если хотите.



function makeGrid(){
let number = input.value;
if(number < 0 || number > 64 || isNaN(number)){
promptText.textContent = `Invalid number. Generating 10 x 10 grid. Please enter a number between 2 and 64.`;
} else {
promptText.textContent = "";
input.value = "";
canvas.innerHTML = "";
}
if(number == 0 || number > 64 || number == ""){
canvas.innerHTML = "";
for(let i = 0; i < 10; i++){
const row = document.createElement("div");
row.classList.add("rows");
canvas.appendChild(row);

for(let j = 0; j < 10; j++){
const column = document.createElement("div");
column.classList.add("columns");
row.appendChild(column);
}
}
} else {
promptText.textContent = `Generating a ${number} x ${number} grid...`;
for(let i = 0; i < number; i++){
const row = document.createElement("div");
row.classList.add("rows");
canvas.appendChild(row);

for(let j = 0; j < number; j++){
const column = document.createElement("div");
column.classList.add("columns");
row.appendChild(column);
}
}
draw();
}
}

let isMouseDown = false;

document.addEventListener("mousedown", () => {
isMouseDown = true
});
document.addEventListener("mouseup", () => {
isMouseDown = false
});

function draw(){
let columns = document.getElementsByClassName("columns");
for(let i = 0; i < columns.length; i++){
columns.addEventListener("mousedown", changeColors);
columns.addEventListener("mouseover", function () {
if(isMouseDown){
changeColors.call(this);
}
})
}
}


Подробнее здесь: https://stackoverflow.com/questions/797 ... ting-stuck