如何实现鼠标点击拖拽时批量改变Div元素颜色？

要实现点击拖拽划过Div元素时批量变色的效果，核心是通过状态变量跟踪鼠标按下状态，结合mouseover事件实现条件着色。以下是修改后的完整代码：

const n = +(prompt('Enter a number between 1 and 100'));
const sketchArea = document.querySelector('.sketchArea');
let isDrawing = false; // 标记是否处于绘图状态

function addColor(e){
    if(isDrawing){
        e.target.classList.add('black');
    }
}

function startDrawing(e){
    isDrawing = true;
    addColor(e); // 点击瞬间给当前元素着色
}

function stopDrawing(){
    isDrawing = false;
}

for(let i=0;i<(n*n);i++){
    const div = document.createElement('div');
    div.classList.add('box');
    div.addEventListener('mouseover', addColor);
    div.addEventListener('mousedown', startDrawing);
    sketchArea.appendChild(div);
}

// 绑定全局鼠标松开事件，确保鼠标移出绘图区也能停止
document.addEventListener('mouseup', stopDrawing);

sketchArea.setAttribute('style', `grid-template-columns: repeat(${n},1fr); grid-template-rows:repeat(${n},1fr);`);

关键逻辑说明 #

• 状态变量isDrawing：用于控制是否允许着色，初始为false，鼠标按下时设为true，松开时设为false。
• startDrawing：处理鼠标按下事件，激活绘图状态并立即给点击的元素着色，避免点击后需要移动才着色的问题。
• addColor：增加状态判断，仅当isDrawing为true时才给元素添加颜色类，解决单纯mouseover导致的无差别着色问题。
• 全局mouseup事件：绑定在document上，确保即使鼠标移出绘图区域，松开鼠标也能停止着色，提升交互体验。

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