Configuré una cuadrícula de 16x16 con un fondo blanco. Ahora quiero que los divs (elementos de la cuadrícula) cambien de color cada vez que presiono y mantengo presionado el mouse y me muevo sobre ellos, y que dejen de cambiar de color cuando detengo el evento mousedown, como en pintura . en mi guion:
let gridContainer = document.getElementById('grid-container'); let gridArray = []; for(let i = 0; i < 256; i++){ let div = document.createElement('div'); div.setAttribute('class', 'grid-item'); gridContainer.append(div); gridArray[i] = div; } gridContainer.addEventListener("mousedown", draw) gridContainer.addEventListener("mouseup",stopDraw) function draw(){ gridArray.forEach(item => item.addEventListener("mouseover", () => { (item.classList.add('hover')) })); } function stopDraw(){ gridArray.forEach(item => item.removeEventListener("mouseover", () => { (item.classList.add('hover')) })); }La clase flotante se usa para cambiar el color de fondo a azul.
Probé varios otros enfoques, pero siempre termino en el mismo lugar, la función de dibujar no funciona a menos que haga clic en que ejecuta la función y luego no se detiene, sigue ejecutándose incluso después de dejar el mouse.
Estoy usando Vanilla JS, todavía estoy aprendiendo lo básico.
Aquí está mi código para comprender mejor mi problema: https://codepen.io/ahmedmk11/pen/VwrmyGW
EDITAR: Me acabo de dar cuenta de que no expliqué mi problema de una manera clara, por lo que la función de dibujar funciona correctamente, pero mi problema es que no deja de funcionar, necesito trabajar solo cuando imprimo y sostenga solo, como un bolígrafo.
Usar detectores de eventos es un buen enfoque, para seguir con esto, he cambiado su código para usar un objeto. El uso de un objeto permite almacenar temporalmente el estado del mouse. Usando el método "canDraw ()", podemos leer del objeto para determinar si el evento del mouse todavía está ocurriendo. Todavía está ocurriendo si la tecla "mousedown" todavía está presente.
Los eventos ahora solo agregan o eliminan la clave del objeto "mouseEvent".
let gridContainer = document.getElementById('grid-container'); let gridArray = []; let mouseEvent = {}; for(let i = 0; i < 256; i++){ let div = document.createElement('div'); div.setAttribute('class', 'grid-item'); div.addEventListener("mouseover", draw); gridContainer.append(div); gridArray[i] = div; } gridContainer.addEventListener("mousedown", () => mouseEvent.mouseDown = true) gridContainer.addEventListener("mouseup", () => delete mouseEvent.mouseDown) function canDraw() { return mouseEvent.mouseDown; } function draw(e){ if (canDraw()) { e.fromElement.classList.add('hover'); } }Parece que usted dice que los div deben pintarse cuando se presiona el botón del mouse, pero en realidad nunca dice que los div no deben pintarse cuando no se presiona el botón del mouse, esto sucede en esta parte específica:
function draw(){ gridArray.forEach(item => item.addEventListener("mouseover", () => { (item.classList.add('hover')) })); } function stopDraw(){ // right here! gridArray.forEach(item => item.removeEventListener("mouseover", () => { (item.classList.add('hover')) })); }Podría cambiar su código para hacer algo como "oye, cuando mi mouse está arriba y sobre los divs, no quiero insertar la clase que los pinta", así:
function draw(){ gridArray.forEach(item => item.addEventListener("mouseover", () => { item.classList.add('hover'); })); } function stopDraw(){ // now we have a event that removes the class gridArray.forEach(item => item.addEventListener("mouseover", () => { item.classList.remove('hover'); })); }También hice algunos refactores (cambié let por const cuando fue necesario, corregí el diseño y moví el uso de las funciones draw y stopDraw después de sus declaraciones), traté de hacer menos cambios como pude, la solución final es:
const gridContainer = document.getElementById('grid-container'); let gridArray = []; for(let i = 0; i < 256; i += 1){ const div = document.createElement('div'); div.setAttribute('class', 'grid-item'); gridContainer.append(div); gridArray.push(div); } function draw(){ gridArray.forEach(item => item.addEventListener("mouseover", () => { item.classList.add('hover'); })); } function stopDraw(){ gridArray.forEach(item => item.addEventListener("mouseover", () => { item.classList.remove('hover'); })); } gridContainer.addEventListener("mousedown", draw); gridContainer.addEventListener("mouseup", stopDraw);