我目前正在做来自 Odin 元素的 etch-a-sketch 元素，遇到了一个问题，当我单击并将鼠标拖到绘图网格上时，我的光标有时会变成一个 block 图标。我目前有一个变量 isPainting用作在网格上绘制的 bool 值，在 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>预期结果:只有在按住鼠标按钮并在网格上移动时，用户才能在 etch-a-sketch 网格上绘图。释放鼠标按钮的那一刻，绘图将停止。
实际结果:有时当鼠标按住并移动时，光标会变成一个“ block ”图标，并且即使鼠标按钮已经向上，绘图也会停止或仍然绘图。
最佳答案
mousedown 后跟 mousemove 可以产生拖动事件，在这种情况下，特别是当您尝试单击已经着色的黑色方 block 然后移动鼠标时。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>关于javascript - 为什么我的光标在鼠标按下时变成 block 图标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71978770/