如何仅针对某些（大）断点启用 Bootstrap 弹出窗口？

Question

我有一个完全可用的弹出窗口：

标记：

<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>

调用：

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

当我将鼠标悬停在“点击链接”上时，弹出窗口就会按照我想要的方式出现，但当我在 iPad 等可触摸设备上点击手指时，它也会出现。

我怎样才能：

1. 完全禁用小于大断点的弹出窗口
2. 完全禁用“可触摸”设备的弹出窗口

Answer 1

您需要两种方法来返回当前引导断点名称，以及根据设备是否可触摸返回

bool

 的方法：

exports.getBootstrapBreakpoint = function () {
    if (window.matchMedia('(min-width: 1200px)').matches) {
        return 'xl';
    } else if (window.matchMedia('(min-width: 992px)').matches) {
        return 'lg';
    } else if (window.matchMedia('(min-width: 768px)').matches) {
        return 'md';
    } else if (window.matchMedia('(min-width: 576px)').matches) {
        return 'sm';
    } else {
        return 'xs';
    }
}

以上宽度是 Bootstrap 5.3.3 的默认宽度。

exports.isTouchable = function () {
    return ('ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0);
}

接下来定义一个方法，该方法将触发自定义事件：加载、窗口大小调整和设备方向更改，但由于这些事件可能会淹没大量事件，因此我们需要对它们进行反跳：

let resizeTimeout;
$(window).on('load resize orientationchange', function () {
    clearTimeout(resizeTimeout);

    resizeTimeout = setTimeout(function () {
        $(window).trigger('resized');
    }, 250);
});

此时

resized 是我们每 250 毫秒触发一次的自定义事件的名称。

最后，我们可以通过以下逻辑来控制所需弹出窗口的存在，该逻辑结合了我们迄今为止编写的所有内容：

$(window).on('resized', function () {
    const isTouchable = helpers.isTouchable();
    const breakpoint = helpers.getBootstrapBreakpoint();
    const eligible = [
        'lg',
        'xl',
    ];

    if (isTouchable) {
        $('#cart-popover').popover('dispose');
    } else {
        if (!eligible.includes(breakpoint)) {
            $('#cart-popover').popover('dispose');
        } else {
            $('#cart-popover').popover();
        }
    }
});