Why is my cursor turning into a block icon on mousedown?-CodePudding

I'm currently doing the etch-a-sketch project from the Odin Project and running into an issue where my cursor will sometimes turn into a block icon when I click and drag my mouse over my drawing grid. I currently have a variable isPainting that acts as a bool for drawing on the grid, true on mousedown and false on mouseup

The buttons below do not currently work since I've been more focused on getting the drawing to work. Attached is my html, css and javascript code.

let isPainting = false;
document.body.onmousedown = () => (isPainting = true);
document.body.onmouseup = () => (isPainting = false );

function populatePage(size){
let board = document.querySelector(".board");
let squares = board.querySelectorAll("div");
squares.forEach((div) => div.remove());
board.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
board.style.gridTemplateRows = `repeat(${size}, 1fr)`;

let amount= size * size;
for(var i = 0; i < amount; i  ){
    let square = document.createElement('div')
    square.addEventListener('mouseover',colorSquare);
    square.addEventListener('mousedown',colorSquare);
    square.style.backgroundColor = 'grey';
    board.insertAdjacentElement('beforeend',square);
   }
}


function colorSquare(e){
    if(isPainting){
        this.style.backgroundColor = 'black';
    }
}

populatePage(16);

.board{
    width: 500px;
    height:  500px;
    display: grid;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel = "stylesheet" href="styles.css">
    <link rel = "stylesheet" href="normalize.css">
    <title>Etch-a-Sketch</title>
</head>
<body>
    <div >
<div >
    <h1>Etch a Sketch</h1>
    <h2></h2>
</div>
<div >
    <div ></div>
        <div >
        <button>Black</button>
        <button>Erase</button>
        <button>Random</button>
        <button>Reset</button>
    </div>
</div>
<button>Set Size</button>
</div>
</body>
<script src="main.js"></script>
</html>

Expected Result: The user is able to draw on the etch-a-sketch grid only when the mouse button is held down and is moved over the grid. Drawing will stop the moment the mouse button is released.

Actual Result: Sometimes while the mouse is held down and moving, the cursor will turn into a "block" icon and drawing will stop or still draws despite the mouse button being up already.

CodePudding user response：

A mousedown followed by a mousemove can produce a drag event, in this case specifically when you try to click on an already colored-in black square and then move your mouse.

The not-allowed cursor you are seeing is a result of this event firing and the browser trying to interpret what to do with what you are "dragging". If you preventDefault on the mousedown event, the drag event is no longer produced, and so the not-allowed cursor does not appear.

Relevant code:

    document.body.onmousedown = (e) => {
      isPainting = true; 
      e.preventDefault();
    };

let isPainting = false;
document.body.onmousedown = (e) => {
  isPainting = true; 
  e.preventDefault();
};
document.body.onmouseup = () => (isPainting = false );

function populatePage(size){
let board = document.querySelector(".board");
let squares = board.querySelectorAll("div");
squares.forEach((div) => div.remove());
board.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
board.style.gridTemplateRows = `repeat(${size}, 1fr)`;

let amount= size * size;
for(var i = 0; i < amount; i  ){
    let square = document.createElement('div')
    square.addEventListener('mouseover',colorSquare);
    square.addEventListener('mousedown',colorSquare);
    square.style.backgroundColor = 'grey';
    board.insertAdjacentElement('beforeend',square);
   }
}


function colorSquare(e){
    if(isPainting){
        this.style.backgroundColor = 'black';
    }
}

populatePage(16);

.board{
    width: 500px;
    height:  500px;
    display: grid;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel = "stylesheet" href="styles.css">
    <link rel = "stylesheet" href="normalize.css">
    <title>Etch-a-Sketch</title>
</head>
<body>
    <div >
<div >
    <h1>Etch a Sketch</h1>
    <h2></h2>
</div>
<div >
    <div ></div>
        <div >
        <button>Black</button>
        <button>Erase</button>
        <button>Random</button>
        <button>Reset</button>
    </div>
</div>
<button>Set Size</button>
</div>
</body>
<script src="main.js"></script>
</html>