求助：JavaScript中.toggle方法仅生效1.5次的问题

问题原因 #

你每次调用prodImgPopup函数时，都会给弹窗元素新增一个click事件监听器。具体流程：

• 第一次点击图片：弹窗打开（toggle添加类），同时绑定第一个关闭事件，点击背景时弹窗关闭（toggle移除类）
• 第二次点击图片：弹窗打开（toggle添加类），又绑定了第二个关闭事件，此时点击背景会触发两次toggle——先移除类再添加类，结果弹窗看起来没关闭。

修复方案 #

方案1：将关闭事件移到函数外，只绑定一次 #

把弹窗的关闭逻辑放到函数外部，避免重复绑定事件，同时用const声明变量避免全局污染：

// 提前获取DOM元素，避免重复查询
const popUpModal = document.querySelector(".prodimgpop")
const popupImgID = document.getElementById("popID")

// 只绑定一次关闭事件
popUpModal.addEventListener("click", () => {
    popUpModal.classList.toggle("product-popup-show")
})

function prodImgPopup(a) {
    popUpModal.classList.toggle("product-popup-show")
    popupImgID.src = a.src
}

方案2：用事件委托（更适合多图片场景） #

如果页面有多个图片需要触发弹窗，事件委托能避免给每个图片绑定事件，逻辑也更清晰：

const popUpModal = document.querySelector(".prodimgpop")
const popupImgID = document.getElementById("popID")

document.addEventListener("click", (e) => {
    // 点击图片时打开弹窗（替换成你的图片选择器）
    if (e.target.tagName === "IMG" && e.target.classList.contains("your-image-class")) {
        popUpModal.classList.add("product-popup-show")
        popupImgID.src = e.target.src
    } 
    // 点击弹窗背景时关闭弹窗
    else if (e.target === popUpModal) {
        popUpModal.classList.remove("product-popup-show")
    }
})

这里用add/remove代替toggle，能避免状态混乱，还可以防止点击弹窗内的图片时误关弹窗。

额外优化 #

如果弹窗内的图片被点击时不想关闭弹窗，可以在关闭事件里加判断：

popUpModal.addEventListener("click", (e) => {
    if (e.target === popupImgID) return; // 点击弹窗内的图片，不执行关闭
    popUpModal.classList.toggle("product-popup-show")
})

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