nextLevel 函数不会在 LeftSide 的最后一个子级上的点击事件上执行

Question

编辑：让我解释一下这个项目是什么。我必须制作一个游戏，玩家必须点击左侧不存在的面部；基本上是多余的脸。到目前为止，我可以让一切都很好地填充，但是当我点击额外的面孔时，nextLevel 函数不会执行。

编辑：另外，请记住 generateFaces 函数在 HTML 中首次执行 onLoad（未显示）。

nextLevel 函数不会在我单击左侧的额外面（即 theleftSide.lastChild）时执行。它只是直接转到 gameOver 函数，如果您单击身体上的其他任何地方，它应该会执行。我的代码：

    let numberOfFaces = 5;
    const theLeftSide = document.querySelector('#leftSide');
    const theRightSide = document.querySelector('#rightSide');

    function generateFaces() {
        for (let i = 0; i < numberOfFaces; i++) {
            const face = document.createElement('img');
            face.src = 'images/smile.png';

            let randomTop = Math.floor(Math.random() * 400) + 1;
            let randomLeft = Math.floor(Math.random() * 400) + 1;
            face.style.top = randomTop + 'px';
            face.style.left = randomLeft + 'px';
            theLeftSide.appendChild(face);
        }

        const leftSideImages = theLeftSide.cloneNode(true);
        leftSideImages.removeChild(leftSideImages.lastChild);
        theRightSide.appendChild(leftSideImages);

        theLeftSide.lastChild.addEventListener('click', nextLevel);

        document.body.addEventListener('click', gameOver);
    }

    function nextLevel(event) {
        event.stopPropagation();
        numberOfFaces += 5;
        
        generateFaces();
    }

    function gameOver() {
        alert('Game Over!');
        // theLeftSide.lastChild.removeEventListener('click', nextLevel);
        // document.body.removeEventListener('click', gameOver);
    }

我已经多次检查了整个代码以及我对项目的说明，但我似乎仍然无法弄清楚哪里出了问题。看来我已正确遵循所有说明。

事件监听器是不是在正确的地方？

任何帮助将不胜感激。谢谢。

Answer 1

问题是您在

theLeftSide.lastChild

函数中将点击事件监听器添加到

generateFaces()

，这意味着它只会被添加到生成的最后一张脸上。当您再次调用

generateFaces()

以添加更多面孔时，事件侦听器将仅附加到更新的

theLeftSide

元素中的最后一张面孔，而不是之前的面孔。

要解决此问题，您可以将

theLeftSide.lastChild.addEventListener('click', nextLevel);

行移到

generateFaces()

函数之外，并在首次调用

generateFaces()

函数后添加它。这将确保事件侦听器附加到生成的所有面孔，而不仅仅是最后一个面孔。

let numberOfFaces = 5;
const theLeftSide = document.querySelector('#leftSide');
const theRightSide = document.querySelector('#rightSide');

function generateFaces() {
    for (let i = 0; i < numberOfFaces; i++) {
        const face = document.createElement('img');
        face.src = 'images/smile.png';

        let randomTop = Math.floor(Math.random() * 400) + 1;
        let randomLeft = Math.floor(Math.random() * 400) + 1;
        face.style.top = randomTop + 'px';
        face.style.left = randomLeft + 'px';
        theLeftSide.appendChild(face);
    }

    const leftSideImages = theLeftSide.cloneNode(true);
    leftSideImages.removeChild(leftSideImages.lastChild);
    theRightSide.appendChild(leftSideImages);
}

generateFaces(); // Call generateFaces() for the first time

theLeftSide.lastChild.addEventListener('click', nextLevel);

document.body.addEventListener('click', gameOver);

function nextLevel(event) {
    event.stopPropagation();
    numberOfFaces += 5;
    
    generateFaces();
    theLeftSide.lastChild.addEventListener('click', nextLevel); // Add the event listener again for the new faces
}

function gameOver() {
    alert('Game Over!');
    // theLeftSide.lastChild.removeEventListener('click', nextLevel);
    // document.body.removeEventListener('click', gameOver);
}

Answer 2

我发现这是 Chrome 的问题。在包括 Chrome Portable 在内的其他浏览器中一切正常。它可能是我正在运行的扩展。稍后我将不得不解决这个问题。但无论如何，看来我的代码现在可以工作了。感谢回答的人。 :)