如何用原生JavaScript实现点击遮罩层关闭模态框且内容区点击不触发

你可以直接通过判断实际点击元素和绑定事件的遮罩层元素是否一致来实现需求，比单独对比id更稳妥，不会受id重复、DOM结构变化影响：

推荐实现代码 #

// modal 为你的遮罩层 DOM 元素
modal.addEventListener('click', destroy, false);

function destroy(e) {
    // 仅当点击的元素就是绑定事件的遮罩层本身时，才触发隐藏逻辑
    if (e.target === e.currentTarget) {
        // 这里替换为你需要的隐藏逻辑，不需要刷新页面可以去掉reload
        // modal.style.display = 'none'; // 普通隐藏遮罩的写法
        window.location.reload(false); // 如果你确实需要刷新页面保留这行即可
    }
}

可选兼容写法（如果你需要保留原有的overlay判断逻辑） #

如果你的overlay变量本身就是遮罩层DOM实例，可以直接对比元素本身，避免id重复带来的异常：

modal.addEventListener('click', destroy, false);

function destroy(e) {
    if (e.target === overlay) {
        modal.style.display = 'none'; // 替换为你的隐藏/销毁逻辑
    }
}

注意事项 #

• 不要通过阻止内部子元素的事件冒泡来实现该需求，会导致子元素自身绑定的点击事件无法正常触发
• 上述方案不受内部子元素层级影响，只要点击的不是最外层遮罩，都不会触发隐藏逻辑

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