如何讓我的光標在我的草圖網頁項目中表現得像一支筆？

Question

我設置了一個 16x16 的網格，現在我希望 div（網格項）在每次按住鼠標並移過它們時改變顏色，並在我停止 mousedown 事件時停止改變顏色，就像在繪畫中一樣. 在我的腳本中：

let gridContainer = document.getElementById('grid-container');
let gridArray = [];
for(let i = 0; i < 256; i++){
    let div = document.createElement('div');
    div.setAttribute('class', 'grid-item');
    gridContainer.append(div);
    gridArray[i] = div;
}

gridContainer.addEventListener("mousedown", draw)
gridContainer.addEventListener("mouseup",stopDraw)

function draw(){
    gridArray.forEach(item => item.addEventListener("mouseover", () => {
        (item.classList.add('hover')) 
    }));
}

function stopDraw(){
    gridArray.forEach(item => item.removeEventListener("mouseover", () => {
        (item.classList.add('hover')) 
    }));
}

Answer 1

使用事件偵聽器是一種很好的方法，為了保持這一點，我已將您的代碼更改為使用對象。 使用對象可以臨時存儲鼠標的狀態。 使用“canDraw()”方法，我們可以從對象中讀取以確定鼠標事件是否仍在發生。 如果“mousedown”鍵仍然存在，它仍然會發生。

這些事件現在只是從“mouseEvent”對象中添加或刪除鍵。

let gridContainer = document.getElementById('grid-container');
let gridArray = [];
let mouseEvent = {};
for(let i = 0; i < 256; i++){
    let div = document.createElement('div');
    div.setAttribute('class', 'grid-item');
    div.addEventListener("mouseover", draw);
    gridContainer.append(div);
    gridArray[i] = div;
}

gridContainer.addEventListener("mousedown", () => mouseEvent.mouseDown = true)
gridContainer.addEventListener("mouseup", () => delete mouseEvent.mouseDown)

function canDraw() {
  return mouseEvent.mouseDown;
}

function draw(e){
    if (canDraw()) {
      e.fromElement.classList.add('hover');
    }
}

Answer 2

看起來你說按下鼠標按鈕時應該繪制 div，但你從來沒有真正說不按下鼠標按鈕時不應該繪制 div，這發生在這個特定的部分：

function draw(){
    gridArray.forEach(item => item.addEventListener("mouseover", () => {
        (item.classList.add('hover')) 
    }));
}

function stopDraw(){
    // right here!
    gridArray.forEach(item => item.removeEventListener("mouseover", () => {
        (item.classList.add('hover')) 
    }));
}