twitter-bootstrap - Bootstrap 5 offcanvas 禁用点击关闭

Question

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

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

Answer 1

Bootstrap 向body. 因此，您将单击事件侦听器附加到body，并阻止事件传播......

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

演示

Answer 2

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

Answer 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();
});