Bootstrap 5编程式打开底部Offcanvas时仅显示遮罩即自动关闭怎么办？

两个逻辑叠加导致了Offcanvas弹出后立刻自动关闭的现象：

• 重复实例化：每一次点击商品卡片，都会为同一个Offcanvas DOM元素新建插件实例，同一DOM上堆叠多套事件监听器，触发逻辑冲突
• 时序错位：在click事件的冒泡回调里直接调用show()方法时，插件会立刻给document绑定「点击Offcanvas外部区域自动关闭」的监听器，但当前这次click事件还没走完冒泡流程，新绑定的监听器会把这次来自商品卡片的点击误判为「点击Offcanvas外部」，直接触发关闭流程。

1. 页面DOM初始化完成后，提前创建Offcanvas的单实例，不要在点击回调中重复新建实例
2. 把show()方法的调用逻辑延迟到当前click事件完全冒泡结束后执行，避免新绑定的外部点击监听器捕获到本次正在传播的点击事件

document.addEventListener('DOMContentLoaded', function() {
  // 提前初始化Offcanvas单实例
  const offcanvasDom = document.getElementById('offcanvasBottom')
  const bsOffcanvas = new bootstrap.Offcanvas(offcanvasDom)

  // 绑定商品卡片点击事件
  const productCards = document.querySelectorAll(".card.product");
  productCards.forEach(card => {
    card.addEventListener("click", function (e) {
      e.preventDefault()
      // 延迟到当前click事件冒泡完成后再打开Offcanvas
      setTimeout(() => {
        bsOffcanvas.show()
      }, 0)
    })
  })
})

原有的HTML结构不需要做任何修改即可正常运行。

• 所有Bootstrap 5插件都不建议在每次交互回调中重复实例化，重复初始化会造成事件监听器堆叠、内存泄漏和逻辑冲突，统一在页面DOM准备完成后创建单实例，后续交互直接调用实例方法即可
• 你当前使用的是Bootstrap 5.0.0-beta3预览版本，该版本的Offcanvas存在已知的事件绑定时序bug，后续如果升级到5.2及以上的稳定正式版，不需要加setTimeout延迟逻辑即可正常运行
• 不要随意修改Offcanvas的默认z-index层级，否则会出现遮罩层在卡片下方、无法正确捕获点击事件的异常

内容的提问来源于stack exchange，提问作者NiceToMytyuk