JavaScript扫雷游戏右键插旗contextmenu事件失效问题排查

你的右键插旗功能失效是两个逻辑错误导致的：

• 你把contextmenu事件绑定在了整个棋盘容器上，触发事件时只调用了setFlag()切换全局插旗开关，没有获取到右键实际点击的格子对象，自然无法在对应位置插旗
• 现有插旗逻辑依赖全局变量flagEnabled，必须先点击下方旗帜按钮开启插旗模式，左键点击格子才能插旗，和你预期的「右键直接点击格子插旗」的交互逻辑完全不匹配

1. 移除原有错误的棋盘右键绑定 #

删除startGame函数中这段无效的事件绑定代码：

document.getElementById("board").addEventListener("contextmenu", e=> {
    e.preventDefault();
    setFlag();
});

2. 给单个格子绑定右键插旗事件 #

在双层循环创建格子的代码块中，给每个生成的tile元素单独绑定contextmenu事件，触发时直接操作当前点击的格子：

for (let r = 0; r < rows; r++) {
    let row = [];
    for (let c = 0; c < columns; c++) {
        let tile = document.createElement("div");
        tile.id = r.toString() + "-" + c.toString();
        tile.addEventListener("click", clickTile);
        // 新增：单格右键插旗逻辑
        tile.addEventListener("contextmenu", (e) => {
            e.preventDefault();
            // 游戏结束、已点开的格子不允许插旗
            if (gameOver || tile.classList.contains("tile-clicked")) return;
            // 切换当前格子的旗帜状态
            tile.innerText = tile.innerText === "" ? "🚩" : "";
        })
        document.getElementById("board").append(tile);
        row.push(tile);
    }
    board.push(row);
}

可选优化 #

如果你需要保留原有「点击旗帜按钮切换左键插旗模式」的功能，不需要修改现有setFlag()和clickTile里的相关逻辑，新增的右键插旗逻辑和原有功能完全兼容。
如果要做更完整的体验，可以在插旗/取消插旗时同步更新顶部的剩余雷数计数：插旗时计数减1，取消插旗时计数加1，计数归0且所有非雷格子都点开时判定胜利。

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