Bootstrap 5 offcanvas 禁用点击关闭

Question

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

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

Answer 1

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

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

Demo

Answer 2

我不喜欢这个解决方案，但它可以满足我今天的需求。（我真的希望 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();
});

Answer 3

将 data-bs-keyboard="false" 设置为 off-canvas 元素的 data-attribute 似乎在 Bootstrap 5.1.1

中有效

Bootstrap 5 offcanvas 禁用点击关闭

Bootstrap 5 offcanvas disable close on click

twitter-bootstrap

off-canvas-menu

bootstrap-5