JavaScript实现图片弹窗关闭功能失效问题排查

问题原因 #

事件冒泡引发冲突：关闭按钮是父容器div的子元素，点击关闭按钮时，会先触发自身的隐藏事件，但事件会向上冒泡到父div，父div的点击事件又会重新将弹窗和关闭按钮设为显示状态，最终导致关闭操作看起来无效。

修复方法（两种可选） #

方法1：阻止关闭按钮的事件冒泡

在关闭按钮的事件处理函数中添加stopPropagation()，阻断事件向父元素传递：

closeModal.addEventListener('click', (e) => {
    e.stopPropagation(); // 阻止事件冒泡
    modal.style.display = 'none';
    closeModal.style.display = 'none';
});

方法2：限制父容器的触发条件

修改父div的点击事件，仅当点击对象是卡片区域时才执行弹窗显示逻辑，避免点击关闭按钮时触发父元素的显示操作：

div.addEventListener('click', (e) => {
    // 仅点击卡片区域时打开弹窗
    if (e.target.closest('.card')) {
        modal.style.display = 'block';
        closeModal.style.display = 'block';
    }
});

完整修改代码示例（以方法1为例） #

for (let i = 0; i < 20; i++) {
    const div = document.createElement('div');
    div.innerHTML = `
    <div class = "card cursor">
      <div>
        <img
          src="/src/imgs/no-toy.jpeg"
          class="card-img-top"
        />
        </div>
        <div class="card-body">
            <h5 class="card-title">No toy shefilor</h5>
            <p class="card-text"> </p>
        </div>
    </div>
    <span class="close">&times;</span>  
    <div class="modal">
        <img class="modal-content" src="/src/imgs/no-toy.jpeg">
        <div id="caption"></div>
    </div>
    `;
    const modal = div.querySelector('.modal');
    const closeModal = div.querySelector('.close');
    div.addEventListener('click', () => {
        modal.style.display = 'block';
        closeModal.style.display = 'block';
    });
    closeModal.addEventListener('click', (e) => {
        e.stopPropagation(); // 新增阻止冒泡代码
        modal.style.display = 'none';
        closeModal.style.display = 'none';
    });
    list.appendChild(div);
}

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