事件监听器停止监听

Question

我设置了一个 16x16 的正方形网格，当悬停在每个正方形上时，每个正方形的背景都会改变颜色。

然后我有一个按钮来清除起始网格并提示用户输入新网格的尺寸，然后设置下一个网格并且似乎工作正常。

但是，在此阶段，'mouseover' 事件的现有事件侦听器不再有效。

我已经检查了所有的语法和任何变量名冲突，但没有解决 - 请帮忙！

我的 script/html/css 在这里：https://codepen.io/Turbo124/pen/KKyMzxX

我的脚本也显示在下面 - 谢谢。

const gridContainer = document.querySelector('#grid-container');

function makeGrid(rows, cols) {
    gridContainer.style.setProperty('--gridRows', rows);
    gridContainer.style.setProperty('--gridCols', cols);
    for (let i = 0; i < (rows * cols); i++) {
        let newCell = document.createElement("div");
        // newCell.textContent = (i + 1);
        newCell.classList.add("cells");
        gridContainer.appendChild(newCell);
    }
   
}

makeGrid(16,16);

document.querySelectorAll('.cells').forEach(cell => {
    cell.addEventListener('mouseover', event => {
        cell.style.backgroundColor = "blue";
        console.log("hover");
    })
})

button = document.getElementById("button");
button.addEventListener("click", clearGrid);
button.addEventListener("click",setGrid);

function clearGrid() {
    let temp = gridContainer.childElementCount;
    for (let i = 0; i < temp; i++) {
    gridContainer.removeChild(gridContainer.childNodes[0]);
    }
}

function setGrid() {
    let temp = prompt("Enter number of squares per side")
    makeGrid(temp, temp);

};

Answer 1

您的问题是鼠标悬停在动态创建的元素上不起作用尝试将鼠标悬停在父元素上 div 并检查哪个目标元素触发了 event.Here 看看这篇文章关于事件委托 https://davidwalsh.name/event-delegate.

事件监听器停止监听

Event listener stops listening

javascript

mouseover

event-listener

addeventlistener