如何为像素画网页实现按住鼠标拖拽绘制功能？

问题：当前鼠标经过网格单元就会触发绘制，需要改成按住鼠标按键拖拽时才执行绘制。

核心思路 #

添加一个状态变量记录鼠标是否处于按下状态，仅当鼠标按下且经过网格单元时才绘制，同时监听全局鼠标松开事件重置状态，避免鼠标移出画布后松开导致的异常绘制。

修改后的代码 #

JavaScript

const GRIDSIDE = 600;
let side = 16;
// 状态变量：记录鼠标是否按下
let isMouseDown = false;

const grid = document.querySelector(".grid");

for (let i = 0; i < (side * side); i++) {
    const gridElement = document.createElement("div");
    grid.appendChild(gridElement);

    gridElement.classList.add("gridElement");
    gridElement.style.width = `${(GRIDSIDE / side) - 2}px`;
    gridElement.style.height = `${(GRIDSIDE / side) - 2}px`;

    // 鼠标按下时，标记状态并绘制当前单元
    gridElement.addEventListener("mousedown", () => {
        isMouseDown = true;
        addColor.call(gridElement);
    });
    // 鼠标经过时，仅在按下状态下绘制
    gridElement.addEventListener("mouseover", () => {
        if (isMouseDown) {
            addColor.call(gridElement);
        }
    });
}

// 全局监听鼠标松开，重置状态
document.addEventListener("mouseup", () => {
    isMouseDown = false;
});

function addColor() {
    this.style.backgroundColor = "black";
}

CSS

body {
    background-color: aliceblue;
}

.grid {
    width: 600px;
    height: 600px;
    margin: 100px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: white;

    box-shadow: 10px 10px #D6EAF8;
}

.gridElement {
    flex: none;
    border: 1px solid whitesmoke;
}

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Etch-A-Sketch</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="grid"></div>
    <script src="script.js"></script>
</body>
</html>

关键修改点 #

• 新增isMouseDown变量跟踪鼠标按下状态
• 调整mousedown事件：标记状态并立即绘制当前网格单元
• 调整mouseover事件：仅在鼠标按下时才执行绘制逻辑
• 添加全局mouseup监听：无论鼠标在页面何处松开，都重置状态，避免异常绘制

内容的提问来源于stack exchange，提问作者Alexandra Fernández