点击左侧最后一个表情时nextLevel函数未执行问题求助

核心问题 #

你的代码存在两个关键问题，导致点击正确表情时反而触发gameOver：

1. 重复绑定gameOver事件：每次调用generateFaces都会给document.body添加一个新的gameOver监听。即使点击正确表情时用event.stopPropagation()阻止了当前事件冒泡，之前绑定的多份gameOver监听仍会触发，弹出游戏结束提示。

2. 未清空旧面板内容：每次生成新关卡时，左右面板的旧表情元素没有被移除，左侧面板会堆积所有关卡的表情，theLeftSide.lastChild指向的可能不是当前关卡的额外表情，点击逻辑完全混乱。

修改后的代码 #

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

// 仅绑定一次gameOver事件，避免重复叠加
document.body.addEventListener('click', gameOver);

function generateFaces() {
    // 生成新关卡前清空左右面板，移除旧元素与事件监听
    theLeftSide.innerHTML = '';
    theRightSide.innerHTML = '';

    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);
}

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

function gameOver() {
    alert('Game Over!');
    // 可选：游戏结束后重置关卡
    // numberOfFaces = 5;
    // generateFaces();
}

// 页面加载时初始化第一关
window.onload = generateFaces;

关键修改点说明 #

• 将document.body.addEventListener('click', gameOver)移到全局作用域，仅绑定一次，避免重复叠加事件监听。
• 在generateFaces开头添加面板清空逻辑，确保每次生成的都是当前关卡的全新表情，theLeftSide.lastChild能准确指向当前关卡的额外表情。
• 保留event.stopPropagation()，确保点击正确表情时事件不会冒泡到body触发gameOver。

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