为什么我的光标在按下 mousedown 时变成块状图标？

Question

我目前正在做 Odin 项目的蚀刻素描项目，运行遇到一个问题，即当我单击并将鼠标拖到我的绘图上时，我的光标有时会变成一个块图标网格。我目前有一个变量 isPainting 充当在网格上绘制的布尔值，在 mousedown 时为 true，在 mouseup

时为 false

下面的按钮目前不起作用，因为我更专注于让绘图起作用。附件是我的 html、css 和 javascript 代码。

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 class="flex-container">
<div class="header">
    <h1>Etch a Sketch</h1>
    <h2></h2>
</div>
<div class="content">
    <div class="board"></div>
        <div class="buttons">
        <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>

预期结果：只有在按住鼠标按钮并在网格上移动时，用户才能在蚀刻草图网格上绘图。释放鼠标按钮时绘图将停止。

实际结果：有时在按住鼠标并移动时，光标会变成“方块”图标，绘图会停止或即使鼠标按钮已经松开仍会绘图。

Answer 1

mousedown 后跟 mousemove 可以产生拖动事件，在这种情况下，特别是当您尝试单击已经 colored-in 的黑色方块然后移动鼠标时。

您看到的 not-allowed 光标是此事件触发的结果，浏览器试图解释如何处理您正在“拖动”的内容。如果您 preventDefault 在 mousedown 事件上，将不再产生拖动事件，因此 not-allowed 光标不会出现。

相关代码：

    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 class="flex-container">
<div class="header">
    <h1>Etch a Sketch</h1>
    <h2></h2>
</div>
<div class="content">
    <div class="board"></div>
        <div class="buttons">
        <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>

为什么我的光标在按下 mousedown 时变成块状图标？

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

html

javascript

css

mousedown

相关代码：