Bootstrap 5锚点元素focus事件无法触发Popover求助

问题核心 #

锚点<a>标签默认如果没有href属性，不具备可聚焦能力，而Bootstrap Popover的focus触发器依赖元素的可聚焦状态——这就是按钮能用focus触发popover，但无href的a标签不行的原因。

两种可行解决方案 #

方案1：给锚点添加href属性 #

给需要触发popover的<a>标签加上href="#"（如果是实际业务场景可填真实链接），让它成为可聚焦元素：

<ul>
  <li>
    <a class="people-card" people-card="click-action" href="#" email="test1@test.com">Show Card on Click</a>
  </li>
</ul>

注：如果用href="#"，可在JS中通过event.preventDefault()阻止页面跳转行为，避免点击后回到顶部

方案2：给锚点设置tabindex属性 #

如果不想添加href，直接给<a>标签设置tabindex="0"，强制让它具备可聚焦性：

<ul>
  <li>
    <a class="people-card" people-card="click-action" tabindex="0" email="test1@test.com">Show Card on Click</a>
  </li>
</ul>

验证后的完整代码示例 #

HTML部分 #

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css">
<button type="button" class="btn btn-primary" people-card="click-action" email="test1@test.com">
  Show Card on Click
</button>

<button type="button" class="btn btn-primary" people-card="hover-action" email="test2@test.com">
  Show Card on Hover
</button>

<br>
<br>

<ul>
  <li>
    <a class="people-card" people-card="click-action" href="#" email="test1@test.com">Show Card on Click (带href)</a>
  </li>
  <li>
    <a class="people-card" people-card="click-action" tabindex="0" email="test1@test.com">Show Card on Click (带tabindex)</a>
  </li>
  <li>
    <a class="people-card" people-card="hover-action" email="test2@test.com">Show Card on Hover</a>
  </li>
</ul>

<br>
<br>

<button type="button" class="btn btn-primary" people-card="click-action" email="test1@test.com">
  Show Card on Click
</button>

<button type="button" class="btn btn-primary" people-card="hover-action" email="test2@test.com">
  Show Card on Hover
</button>


<div id="popover-content" style="display:none">
  <p>test</p>
</div>

JavaScript部分（无需修改原逻辑） #

document.addEventListener("DOMContentLoaded", function(event) {
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[people-card="click-action"]'));
  var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl, {
      container: 'body',
      html: true,
      trigger: 'focus',
      content: function() {
        return document.getElementById('popover-content').outerHTML;
      }
    })
  });

  var popoverTriggerList = [].slice.call(document.querySelectorAll('[people-card="hover-action"]'));
  var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl, {
      container: 'body',
      html: true,
      trigger: 'hover',
      content: function() {
        return document.getElementById('popover-content').outerHTML;
      }
    })
  });
});

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