MouseEvent事件冒泡：替换mouseout为mouseleave后如何修改目标元素zIndex

问题核心原因 #

mouseleave 事件本身不冒泡，触发时 e.target 固定为你绑定监听器的 giphyContainer 元素，之前适配 mouseout（会冒泡，target可能是子元素）的DOM查找逻辑自然就失效了，而且你用 firstChild/lastElementChild 这类硬编码DOM层级的写法稳定性极低，只要DOM结构稍微调整就会报错。

最优修改方案 #

直接将mouseover也替换为和mouseleave配对的mouseenter（同样不冒泡，彻底解决冒泡问题），统一从事件绑定的容器本身查询你需要的前后面板，不需要依赖e.target的层级关系：

// 替换mouseover为mouseenter，和mouseleave配对，两者都不冒泡
giphyContainer.addEventListener('mouseenter', (e) => {
    // 如果仅需要鼠标移到Front面板才触发切换，打开下面一行注释即可
    // if (!e.target.classList.contains('giphyImg__Front')) return
    // 直接从绑定事件的容器查询两个面板，不受target影响
    const container = e.currentTarget;
    const backPanel = container.querySelector('.giphyImg__Back');
    const frontPanel = container.querySelector('.giphyImg__Front');
    
    if (frontPanel && backPanel) {
        frontPanel.style.zIndex = "-3";
        backPanel.style.zIndex = "3";
    }
});

giphyContainer.addEventListener('mouseleave', (e) => {
    // 同样从容器本身查询元素，不用硬编码DOM层级
    const container = e.currentTarget;
    const backPanel = container.querySelector('.giphyImg__Back');
    const frontPanel = container.querySelector('.giphyImg__Front');
    
    if (frontPanel && backPanel) {
        frontPanel.style.zIndex = 3;
        backPanel.style.zIndex = -3;
    }
});

调整说明 #

• 配对使用mouseenter+mouseleave，天生不冒泡，完全不需要额外处理事件冒泡问题，也不会出现子元素触发父元素事件的情况
• 用e.currentTarget获取绑定事件的容器，再通过类名查询目标元素，不管容器内部DOM结构怎么调整，只要类名不变就不会失效，比硬编码父子、兄弟节点关系稳定很多
• 加了元素存在性判断，避免页面元素没加载完成时报错
• 用classList.contains替代className全等判断，兼容元素有多个类名的场景

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