I'm currently tackling the Etch-a-Sketch project within the Odin Project curriculum, and I've encountered some peculiar behavior while implementing the mousedown and mouseup event listeners.
Within a container div, I have established a 50x50 grid of divs. The container div responds to mousedown events by triggering the startDrawing function, which fills the boxes as the user hovers over them. Similarly, it listens for mouseup events, halting the filling of boxes when the mouse is released.
Everything seems to be functioning smoothly, however, at times, when drawing a line with the left mouse button held down, the box div appears to get "grabbed." Subsequently, dragging the mouse without filling the boxes occurs until the mouse is released, after which normal drawing resumes. It's almost like a toggle switch of sorts after the accidental "grabbing," but reverts back to normal behavior after the next mousedown event.
The issue may be easier to grasp visually, so below you'll find my code snippet along with a link to the corresponding Codepen demonstrating the Etch-a-Sketch project.
I've attempted searching for methods to remove this "grabbing" behavior online, but haven't had much luck, likely because I'm unsure of the appropriate keywords to use.
If anyone can shed light on what's occurring and offer guidance on resolving this, I would greatly appreciate it.
const GRID_SIZE = 50;
for(let i = 0; i < GRID_SIZE * GRID_SIZE; i++){
const container = document.getElementById('container');
let div = document.createElement('div');
div.classList.add('box');
container.appendChild(div);
}
function fillBox(e){
this.classList.add('filled');
}
function clearGrid(){
const boxes = document.querySelectorAll('.box');
boxes.forEach(box => box.classList.remove('filled'));
}
function startDrawing(){
// console.log("start drawing");
const boxes = document.querySelectorAll('.box');
boxes.forEach(box => box.addEventListener('mouseover', fillBox));
}
function stopDrawing(){
// console.log("stop drawing");
const boxes = document.querySelectorAll('.box');
boxes.forEach(box => box.removeEventListener('mouseover', fillBox));
}
const container = document.querySelector('#container');
container.addEventListener('mousedown', startDrawing);
container.addEventListener('mouseup', stopDrawing);
const button = document.querySelector('#clear-grid-btn');
button.onclick = clearGrid;#container{
width: 500px;
display: grid;
grid-template-columns: repeat(50, 10px);
grid-template-rows: repeat(50, 10px);
border: solid;
border-color: black;
margin:auto;
}
.box{
width: 10px;
height: 10px;
}
.box:hover{
background-color: blue;
}
.filled{
background-color: blue;
}
#clear-grid-btn{
display:block;
margin:auto;
margin-top: 10px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0>
<title>Document>
<link rel="stylesheet" href="etch-a-sketch.css>
</head>
<body>
<div id="container></div>
<button id="clear-grid-btn>Clear grid</button>
</body>
<script src="etch-a-sketch.js></script>
</html>