Bootstrap 5中如何移除模态框的focusin事件监听器

问题根因 #

Bootstrap 5 重构了模态框的焦点陷阱逻辑：

• 不再将focusin全局事件绑定在document对象上，改为绑定到模态框实例对应的DOM元素上
• 所有模态框相关事件都增加了bs.modal命名空间，无差别解绑全局focusin事件不会命中Bootstrap绑定的处理函数
• 默认开启的强制焦点捕获逻辑会判定模态框外部的焦点（Kendo下拉列表的弹出层默认是追加到body元素下，属于模态框DOM树外部）为用户点击了模态框外部，直接触发焦点回夺甚至模态框关闭。

可用修复方案（均无需修改现有Kendo下拉组件逻辑） #

方案1：侵入性最低的配置法（推荐） #

直接在初始化模态框时关闭默认的强制焦点捕获配置，不会影响Kendo组件的任何原有逻辑：

// 原生JS初始化写法
const modalInstance = new bootstrap.Modal('#theModalId', {
  focus: false
})

// jQuery初始化写法
$('#theModalId').modal({
  focus: false
})

该方案的唯一影响是模态框打开时不会自动聚焦到内部第一个可交互元素，如果你的业务不依赖这个默认行为，优先选这个方案，不会因为Bootstrap小版本迭代调整事件绑定逻辑导致修复失效。

方案2：精准解绑对应事件（保留模态框自动聚焦行为） #

如果需要保留模态框打开后自动聚焦的默认逻辑，可以在模态框渲染完成后，精准解绑带命名空间的焦点捕获事件：

$("#theModalId").on('shown.bs.modal', function () {
  // 解绑Bootstrap 5绑定在模态框元素上的焦点捕获事件
  $(this).off('focusin.bs.modal');
  // 禁用Bootstrap默认的焦点陷阱初始化逻辑，避免后续重复绑定
  bootstrap.Modal.prototype._initializeFocusTrap = function () { return this };
})

方案3：定向拦截关闭逻辑（兼容特殊场景） #

如果前两个方案和页面其他模态框逻辑有冲突，可以加一层定向判断，只有当焦点落在Kendo组件上时阻止模态框的焦点抢夺和关闭行为：

$("#theModalId").on('hide.bs.modal focusin.bs.modal', function (e) {
  // 判断当前活跃元素属于Kendo组件弹出层时，拦截Bootstrap的默认处理
  if ($(document.activeElement).closest('.k-list-container, .k-popup, .k-widget').length) {
    e.preventDefault();
    e.stopImmediatePropagation();
  }
})

注意事项 #

• 不要尝试直接解绑document上的无命名空间focusin事件，Bootstrap 5 不会把相关事件绑定到全局document上，该操作无效
• Kendo所有弹出类组件默认都会把容器追加到<body>节点下，不属于模态框的DOM子树，这是触发Bootstrap焦点陷阱的核心原因，不需要修改Kendo的appendTo配置来调整弹出层位置，避免引发其他层级问题。

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