如何仅在大屏断点下启用Bootstrap弹出框（popover）？

问题描述 #

我有一个可正常运行的Bootstrap弹出框（popover），相关代码如下：

标记代码 #

<a data-bs-toggle="popover"
   data-bs-trigger="focus hover"
   data-bs-placement="bottom"
   data-bs-html="true"
   data-bs-content="My popover content"
   href="#">
   Click me
</a>

调用代码 #

const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
const popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new Bootstrap.Popover(popoverTriggerEl);
})

当我悬停在“Click me”链接上时，弹出框会按预期显示，但在iPad等触控设备上点击该链接时，弹出框也会触发显示。我希望实现以下任一效果：

• 在小于大屏（large）的断点下完全禁用弹出框
• 在触控设备上完全禁用弹出框

解决方案一：按Bootstrap断点禁用（小于lg断点时禁用） #

Bootstrap默认lg断点为992px，我们可以通过检测窗口宽度，动态控制弹出框的初始化与销毁：

// 初始化/销毁弹出框的核心函数
function togglePopoversByBreakpoint() {
  const lgBreakpoint = 992;
  const popoverTriggers = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));

  if (window.innerWidth >= lgBreakpoint) {
    // 大于等于lg断点时初始化未创建的弹出框
    popoverTriggers.forEach(el => {
      if (!el._popoverInstance) {
        el._popoverInstance = new Bootstrap.Popover(el);
      }
    });
  } else {
    // 小于lg断点时销毁已存在的弹出框
    popoverTriggers.forEach(el => {
      if (el._popoverInstance) {
        el._popoverInstance.dispose();
        delete el._popoverInstance;
      }
    });
  }
}

// 页面加载时执行初始化
window.addEventListener('load', togglePopoversByBreakpoint);
// 窗口大小改变时重新判断
window.addEventListener('resize', togglePopoversByBreakpoint);

解决方案二：检测触控设备禁用弹出框 #

通过浏览器的触控特性检测，仅在非触控设备上初始化弹出框：

// 判断是否为触控设备
function isTouchDevice() {
  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
}

// 仅在非触控设备上初始化弹出框
if (!isTouchDevice()) {
  const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  popoverTriggerList.forEach(el => {
    new Bootstrap.Popover(el);
  });
}

若需应对设备动态切换（如外接鼠标的触控设备），可结合pointerdown事件补充检测，但上述代码已覆盖绝大多数常规场景。

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