Bootstrap 5.3+需手动绑定遮罩关闭：遮罩层（.offcanvas-backdrop）必须与.offcanvas同级兄弟节点，通过getOrCreateInstance获取实例后，为遮罩监听touchend/click并调用hide()，不可直接在遮罩上使用data-bs-dismiss。
点击遮罩层关闭侧边栏的 DOM 结构关键点
Bootstrap 本身不提供“点击遮罩关闭侧边栏”的开箱即用行为，必须手动绑定事件。核心在于：遮罩层（.offcanvas-backdrop 或自定义 div）必须与侧边栏（.offcanvas）同级且紧邻，否则 click 事件冒泡或定位会失效。常见错误是把遮罩写在 .offcanvas 内部，或用 position: fixed 覆盖但 z-index 错乱。
推荐结构：
<div class="offcanvas offcanvas-start"> <div class="offcanvas-header">...</div> <div class="offcanvas-body">...</div> </div> <div class="offcanvas-backdrop fade show"></div>
注意：.offcanvas-backdrop 不能是 .offcanvas 的子元素，它得是兄弟节点。
用 Bootstrap 5.3+ 原生 API 绑定遮罩关闭逻辑
Bootstrap 5.3 起，Offcanvas 实例暴露了 hide() 方法，且支持通过 data-bs-dismiss="offcanvas" 触发关闭 —— 但仅限于侧边栏内部元素。遮罩层不在其默认监听范围内，所以需手动调用。
- 确保侧边栏有
id，例如id="sidebar" - 用
getOrCreateInstance获取实例，避免重复初始化 - 对遮罩层绑定
click，并调用instance.hide()
示例代码：
const sidebarEl = document.getElementById('sidebar');
const backdropEl = document.querySelector('.offcanvas-backdrop');
const sidebar = bootstrap.Offcanvas.getOrCreateInstance(sidebarEl);
backdropEl.addEventListener('click', () => {
sidebar.hide();
});
⚠️ 注意：如果页面存在多个 offcanvas，需按需筛选对应 backdrop，比如加 class 区分：.offcanvas-backdrop[data-bs-target="#sidebar"]。
为什么直接用 data-bs-dismiss="offcanvas" 在遮罩上无效
因为 Bootstrap 的 data-bs-dismiss 机制只扫描触发事件的元素及其祖先节点中是否存在 data-bs-target 或 href 指向目标 offcanvas 的元素，而遮罩层通常没有这些属性，也不在 offcanvas 内部，所以被忽略。
常见误写（无效）：
<div class="offcanvas-backdrop" data-bs-dismiss="offcanvas"></div>
这种写法不会触发任何关闭逻辑 —— data-bs-dismiss 不作用于遮罩层，它只作用于可交互的触发器（如按钮），且要求触发器能明确关联到某个 offcanvas 实例。
移动端点击穿透与 touchend 兼容性处理
在 iOS Safari 和部分安卓 WebView 中，单纯监听 click 可能因 300ms 延迟或点击穿透导致关闭失败，尤其当侧边栏内容含链接或表单时。
- 优先用
touchend替代click，并阻止默认行为 - 同时监听两者，避免 PC 端失效
- 添加
{ passive: false }防止浏览器优化掉 preventDefault
修正后的事件监听：
backdropEl.addEventListener('touchend', e => {
e.preventDefault();
sidebar.hide();
}, { passive: false });
backdropEl.addEventListener('click', () => {
sidebar.hide();
});
遮罩层还应设 cursor: pointer 和 -webkit-tap-highlight-color: transparent，提升触控反馈一致性。
真正容易被忽略的是 backdrop 的 visibility 状态同步：当 offcanvas 手动调用 show() 时，Backdrop 不会自动显示，必须手动控制 fade show 类；同样，hide() 后 backdrop 也不会自动移除类，得靠 shown.bs.offcanvas / hidden.bs.offcanvas 事件补全。这部分逻辑一旦漏掉，遮罩就会残留或不出现。
