点击遮罩层关闭抽屉依赖事件冒泡机制：遮罩层作为父元素捕获点击并触发关闭逻辑，需确保其尺寸、z-index合理且pointer-events正常；抽屉内容区须调用stopPropagation防止误关闭。
点击遮罩层关闭抽屉，本质是利用事件冒泡机制让遮罩层（overlay）捕获点击事件，并触发关闭逻辑。关键不是“实现冒泡”，而是**阻止事件继续向上冒泡干扰抽屉内容区的交互**，同时确保遮罩层本身能响应点击。
遮罩层和抽屉结构要合理嵌套
遮罩层（.overlay）应包裹抽屉容器（.drawer），但抽屉内容区（如按钮、输入框）不能意外拦截或终止事件流向遮罩层：
- HTML 中，
.overlay是父元素，.drawer是其子元素；点击抽屉内部默认会冒泡到.overlay - 抽屉内容区域无需额外绑定关闭逻辑——靠冒泡到遮罩层统一处理更简洁可靠
- 避免给
.drawer设置pointer-events: none，否则内部元素无法操作
给遮罩层绑定点击关闭逻辑
直接监听遮罩层的 click 事件，调用关闭函数即可。由于事件冒泡天然存在，只要用户点在遮罩层上（包括其空白区域），就会触发：
const overlay = document.querySelector('.overlay');
overlay.addEventListener('click', () => {
closeDrawer(); // 你的关闭函数，例如移除 active 类或设置 display: none
});
注意：这里不需要手动调用 e.stopPropagation() —— 遮罩层是目标元素，不是中间冒泡路径上的元素。
立即学习“Java免费学习笔记（深入）”；
阻止抽屉内容点击时关闭抽屉
用户点击抽屉内部（比如一个按钮或链接）时，事件会从目标元素冒泡到遮罩层，导致误关闭。解决方法是在抽屉内容区域的事件处理器中阻止冒泡：
const drawerContent = document.querySelector('.drawer-content');
drawerContent.addEventListener('click', (e) => {
e.stopPropagation(); // 关键：让点击不传到 .overlay
});
也可以只对特定可点击子元素（如按钮、输入框）单独处理，更精准：
drawerContent.querySelectorAll('button, a, input, textarea').forEach(el => {
el.addEventListener('click', e => e.stopPropagation());
});
补充：避免遮罩层被误判为“内容区”
如果遮罩层用了 background: rgba(0,0,0,0.5) 但高度为 0 或未撑开，可能实际点不到。确保：
-
.overlay有足够尺寸（常用position: fixed; top: 0; left: 0; width: 100%; height: 100%;） - z-index 高于页面内容，但低于抽屉主体（例如 overlay: 1000，drawer: 1001）
- 不要给
.overlay设置pointer-events: none，否则点击无效
