17370845950

bootstrap 5 中使用 `data-bs-trigger="click"` 的 popover 默认不支持点击外部关闭，需改用 `focus` 触发方式并添加 `tabindex="0"`，配合原生焦点管理机制实现点击外部自动隐藏。

要让 Bootstrap 5 的 popover 在点击外部区域时自动关闭，关键在于利用浏览器原生的 focusout 行为，而非依赖手动监听 document.click（该方式易出错且与 Bootstrap 5 的 Popover 实例管理冲突）。Bootstrap 官方推荐且最稳定的方式是将触发方式从 "click" 切换为 "focus"，并确保元素可获得焦点。

✅ 正确做法如下：

1. 为触发元素添加 tabindex="0"：使其成为可聚焦的 HTML 元素；
2. 将 data-bs-trigger 改为 "focus"：此时 popover 会在元素获得焦点时显示，失去焦点（如点击外部、按 Tab 键离开或点击 popover 内容）时自动隐藏；
3. 无需额外 JavaScript 监听 click 事件——避免与 Bootstrap 内部事件逻辑冲突（你之前尝试的 jQuery $(document).on('click', ...) 方案在 Bootstrap 5 中失效，因其 Popover 实例已不再暴露 .popover('hide') 方法，且 DOM 结构变更导致 $('.popover') 选择器不可靠）。

? 修改后的 HTML 示例：

? 注意事项：

• tabindex="0" 是必需的——没有它，元素无法被聚焦，focus 触发器将无效；
• data-bs-trigger="focus" 同时支持鼠标点击和键盘操作（如 Tab 进入、Esc 关闭），符合无障碍（a11y）标准；
• 若 popover 内含链接（如你的 URL），请确保链接 target="_blank" 或使用 rel="noopener" 提升安全性；
• 不建议混用 click 和 focus 触发逻辑，也不推荐手动调用 hide()；Bootstrap 5 的 Popover 类已移除 jQuery 依赖，应始终使用 bootstrap.Popover 实例化。

✅ 初始化脚本（保持不变，但需确保在 DOM 加载后执行）：

? 小结：与其“修补”点击外部关闭的逻辑，不如顺应 Bootstrap 5 的设计范式——用 focus 触发 + tabindex 实现开箱即用的失焦关闭行为，简洁、可靠、无障碍友好。