模态窗内外div点击事件处理：点击内容区误触发弹窗关闭问题排查

这个异常是DOM事件冒泡机制导致的，和层叠属性z-index、定位方式都没有关系：

• DOM事件的完整触发流程分为捕获、目标、冒泡三个阶段，默认通过addEventListener绑定的监听器，会在冒泡阶段执行
• 元素的定位方式（fixed/absolute）不会改变DOM的父子归属关系，哪怕.modal-window使用fixed定位脱离了常规文档流，只要它在HTML结构上是.modal-wrapper的子节点，点击它产生的事件依然会向上冒泡到父级
• 你调整z-index的操作仅能改变元素的视觉遮挡优先级，既不会修改DOM的父子结构，也不会阻断事件的冒泡路径，所以无法解决误触发的问题。你测试时看到的连续弹出两个alert的现象，就是事件从子级冒泡到父级、依次触发两层监听器的直接表现。

两种实现方式任选其一即可：

方案1：在父级监听器中判断触发目标，精准匹配点击区域 #

这是更稳妥的通用写法，不需要给所有子级元素单独配置冒泡拦截，直接在绑定在wrapper的关闭函数中增加判断逻辑：只有当用户点击的元素本身就是.modal-wrapper（也就是半透明遮罩区域）时，才执行关闭操作。
示例代码：

function doModalClose(e) {
    // 仅当点击触发源是wrapper本身时，才执行关闭
    if (e.target === modalWrapper) {
        modalWrapper.remove();
    }
}

closeBtn.addEventListener('click', doModalClose);
modalWrapper.addEventListener('click', doModalClose);

这种方式的优势是后续在弹窗内部新增任意嵌套内容时，都不需要重复修改逻辑，事件冒泡到wrapper层时，只要不是点击在遮罩区域上，就不会误触发关闭。

方案2：给弹窗内容区添加冒泡拦截 #

如果希望点击.modal-window区域时完全阻断事件向上传递，也可以给子级弹窗元素单独绑定点击事件，通过stopPropagation方法阻止事件继续冒泡：

// 弹窗内容区点击时阻断冒泡
modalWindow.addEventListener('click', function(e) {
    e.stopPropagation();
})

需要注意的是，这种方式会完全阻断弹窗内容区的事件向上传递，如果后续有依赖事件冒泡的交互逻辑，需要单独做兼容处理。

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