Bootstrap 5 offcanvas 禁用点击关闭答案

【问题标题】：Bootstrap 5 offcanvas disable close on clickBootstrap 5 offcanvas 禁用点击关闭
【发布时间】：2023-03-16 02:00:02
【问题描述】：

我正在使用 offcanvas 组件 (https://getbootstrap.com/docs/5.0/components/offcanvas/)。但是，我想知道当我在 offcanvas 窗口外单击时是否可以阻止它关闭。当我按下 ESC 时，我设法阻止它关闭，但是当我在画布外单击鼠标时，没有办法（就文档而言）阻止它关闭。有人有想法吗？

编辑：我设法通过监听 hide.bs.offcanvas 事件然后使用 e.preventDefault();但是现在我无法使用其默认关闭按钮关闭画布，因为它总是会取消隐藏事件。有什么想法吗？

【问题讨论】：

标签： twitter-bootstrap bootstrap-5 off-canvas-menu

【解决方案1】：

Bootstrap 将点击监听器添加到 body。因此，您需要将点击事件侦听器附加到 body，并阻止事件传播...

document.body.addEventListener('click', function(e){
    e.stopPropagation()
})

Demo

【讨论】：

非常感谢！这似乎有效，但是可以使用吗？这不会导致其他事件/文档单击侦听器行为不正常吗？只是想知道
它只会影响附加到主体的侦听器（开发人员应该注意这一点！）。正如您从演示中看到的那样，它不会导致其他 Bootstrap 事件出现问题。这是解决您提出的问题的唯一方法。
我尝试了这个解决方案，但是下拉菜单会受到影响并且在打开时不会关闭
@francojohnc 您好，尝试更新您的引导程序，在较新版本中，当您单击页面的其他部分时，offcanvas 不再关闭
@sharpness：我使用的是 BS 5.1.3，并且可以确认单击背景时标准的画布确实会关闭。

【解决方案2】：

将data-bs-keyboard="false" 设置为画布外元素的数据属性似乎在 Bootsrap 5.1.1 中有效

【讨论】：

【解决方案3】：

我不喜欢这个解决方案，但它可以满足我今天的需求。（我真的希望 Bootstrap 能尽快给我们这个功能。）

$("#myOffcanvas").on("shown.bs.offcanvas", function () {
    const backdrop = $(".offcanvas-backdrop");
    const parent = backdrop.parent();
    const cloned = backdrop.clone();
    backdrop.remove();
    parent.append(cloned);
}).on("hide.bs.offcanvas", function () {
    $(".offcanvas-backdrop").remove();
});

【讨论】：