Etch A Sketch应用：实现鼠标按下（mousedown）时连续触发EventListener的连续笔触功能

我明白你想要实现的是按住鼠标拖动时连续填充网格的效果，目前只能点击单个单元的问题，主要出在事件监听的逻辑设置上。咱们一步步来调整：

问题分析 #

你当前的代码里，只有在创建网格时penDown为true的情况下才给tile添加mousemove监听，但penDown初始是false，所以所有tile都没绑定这个事件；而且就算后来按住鼠标，已经创建好的tile也不会自动加上监听。正确的思路应该是：给每个tile始终绑定mousemove事件，然后在事件处理函数里判断鼠标是否处于按下状态，再决定是否填充。

修正步骤及代码 #

1. 修改填充逻辑函数

让setTiles先检查penDown的状态，只有按住鼠标时才执行填充：

function setTiles(e) {
    // 只有鼠标按下时才填充
    if (penDown) {
        e.target.classList.add('fill');
    }
}

2. 完善网格创建函数

• 每次创建新网格前先清空旧网格，避免多次点击叠加
• 给每个tile同时绑定mousemove和mousedown事件（保证点击单个tile也能填充）

function createSketchGrid(tiles) {
    // 清空现有网格
    grid.innerHTML = '';
    let gridSize = tiles * tiles;
    for (let i = 0; i < gridSize; i++) {
        let tile = document.createElement('div');
        tile.style.width = wdt;
        tile.style.height = hgt;
        grid.appendChild(tile);
        // 给每个tile绑定mousemove监听
        tile.addEventListener('mousemove', setTiles);
        // 绑定mousedown，点击单个tile也能填充
        tile.addEventListener('mousedown', setTiles);
    }
}

3. 补充鼠标移出容器的处理

防止用户在容器外按住鼠标，移回容器内时仍处于绘制状态：

container.addEventListener('mouseleave', function () {
    penDown = false;
});

4. 修正用户输入的逻辑判断

原来的条件逻辑有误，应该确保输入是1-100之间的有效数字：

function getUserInput() {
    let input = parseInt(prompt(`Please enter the grid size you'd like`));
    // 验证输入：非NaN、大于0且不超过100
    if (!isNaN(input) && input > 0 && input <= 100) {
        createSketchGrid(input);
    } else {
        alert('Please enter a valid number between 1 and 100.');
    }
}

完整修正后的JavaScript代码 #

const container = document.querySelector('#container');
const grid = document.querySelector('#grid');
const userInput = document.querySelector('#user-input');
let penDown = false;
grid.style.fontSize = '1em';

// Set pixel width and height
let wdt = '1em';
let hgt = '1em';

// Ask the user for the number of tiles for the sketch grid
function getUserInput() {
    let input = parseInt(prompt(`Please enter the grid size you'd like`));
    if (!isNaN(input) && input > 0 && input <= 100) {
        createSketchGrid(input);
    } else {
        alert('Please enter a valid number between 1 and 100.');
    }
}

// Event listener to create tiles in mouseover
function setTiles(e) {
    if (penDown) {
        e.target.classList.add('fill');
    }
}

container.addEventListener('mousedown', function () {
    penDown = true;
});

container.addEventListener('mouseup', function () {
    penDown = false;
});

// 补充鼠标移出容器的处理
container.addEventListener('mouseleave', function () {
    penDown = false;
});

// Create the grid
function createSketchGrid(tiles) {
    grid.innerHTML = '';
    let gridSize = tiles * tiles;
    for (let i = 0; i < gridSize; i++) {
        let tile = document.createElement('div');
        tile.style.width = wdt;
        tile.style.height = hgt;
        grid.appendChild(tile);
        tile.addEventListener('mousemove', setTiles);
        tile.addEventListener('mousedown', setTiles);
    }
}

userInput.addEventListener('click', getUserInput);

关键点总结 #

• 每个网格单元始终监听mousemove，通过penDown状态控制是否填充
• 给tile添加mousedown事件，实现点击单个单元的填充
• 修正输入验证逻辑，确保网格尺寸有效
• 增加mouseleave处理，避免异常绘制状态

内容的提问来源于stack exchange，提问作者JackJack