VanillaJS中点击图片无法触发事件监听器的问题求助

问题描述 #

想要编写脚本收集在https://www.rpsgame.org/玩石头剪刀布时的数据，核心代码如下：

var h_choice = document.querySelectorAll(".play-page-gamer__choices")[0];
var h_rock = document.querySelectorAll(".play-page-gamer__choices")[0]
    .childNodes[1].childNodes[2];
var h_paper = document.querySelectorAll(".play-page-gamer__choices")[0]
    .childNodes[3].childNodes[2];
var h_scissors = document.querySelectorAll(".play-page-gamer__choices")[0]
    .childNodes[5].childNodes[2];

game = [];

h_rock.addEventListener("click", () => {
    console.log("rock");
});
h_paper.addEventListener("click", () => {
    console.log("paper");
});
h_scissors.addEventListener("click", () => {
    console.log("scissors");
});

手动点击图片元素时控制台无输出，但通过h_paper.click()模拟点击能正常输出，且事件监听器未被移除。

问题原因 #

1. 事件冒泡被阻止：网站自身交互逻辑可能在父元素或上层元素中添加了event.stopPropagation()，导致绑定在图片上的点击事件无法触发。
2. 元素被上层节点覆盖：页面中可能存在透明遮罩层或其他上层元素，实际点击的并非绑定事件的图片节点。
3. DOM元素选择不稳定：使用childNodes依赖节点索引获取元素，一旦页面DOM结构（比如换行、空格文本节点）变化，就会导致选中错误的元素。

解决办法 #

1. 改用事件委托（最可靠） #

将点击事件绑定到父容器上，通过事件目标的冒泡特性捕获点击，避开上层阻止冒泡的影响：

var h_choice = document.querySelector(".play-page-gamer__choices");
game = [];

// 绑定到父容器
h_choice.addEventListener("click", (e) => {
    // 精准匹配点击的选项元素
    const choiceEl = e.target.closest(".play-page-gamer__choice");
    if (!choiceEl) return;

    // 根据元素特征判断选项类型
    if (choiceEl.classList.contains("choice-rock")) {
        console.log("rock");
        game.push({ player: "rock" });
    } else if (choiceEl.classList.contains("choice-paper")) {
        console.log("paper");
        game.push({ player: "paper" });
    } else if (choiceEl.classList.contains("choice-scissors")) {
        console.log("scissors");
        game.push({ player: "scissors" });
    }
});

2. 替换稳定的元素选择方式 #

放弃childNodes，改用querySelector通过类名精准定位元素，避免索引失效：

// 更稳定的元素获取方式
var h_rock = document.querySelector(".play-page-gamer__choices .choice-rock img");
var h_paper = document.querySelector(".play-page-gamer__choices .choice-paper img");
var h_scissors = document.querySelector(".play-page-gamer__choices .choice-scissors img");

game = [];

// 绑定事件前先确认元素存在
if (h_rock) {
    h_rock.addEventListener("click", () => {
        console.log("rock");
        game.push({ player: "rock" });
    });
}
// 同理绑定paper和scissors的事件

3. 检查并处理上层覆盖元素 #

打开浏览器开发者工具（F12），使用「选择元素」工具点击游戏选项区域，查看实际选中的节点：

• 如果选中的是图片上层的元素，直接给该元素绑定点击事件即可。
• 如果是遮罩层，可通过CSS修改z-index将图片层级调高，或直接给遮罩层绑定事件。

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