我有问题与mattdlockyer的解决方案，因为我设置弹窗链接动态使用如下代码:

$('body').popover({
        selector : '[rel="popover"]'
});

所以我必须这样修改它。它为我解决了很多问题:

$('html').on('click', function (e) {
  $('[data-toggle="popover"]').each(function () {
    //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
        $(this).popover('destroy');
    }
  });
});

记住destroy删除元素，所以选择器部分在初始化弹窗时很重要。

$('html').on('click.popover', function (e) {
    var allpopins = $('.popover.in');
    if (allpopins.has(e.target).length > 0 &&
        !$('.btn', allpopins).is(e.target))
        return;
    // recognise pop-up 
    var id = $(e.target).attr('aria-describedby');
    var popin = $("#" + id);
    //on any button click in entire pop-up hide this pop-ups
    $(popin).on(".btn", function () { popin.remove(); });
    // on any place out of entire popup hide all pop-ups 
    $('.popover.in').not(popin).remove();
});

这是我最好的性能解决方案。欢呼。

答案很好，只要添加一个angular指令，以防你像我一样使用angular:

app.directive('popover', ['$document', function($document) {
    return {
        restrict: 'EA',
        link: function(scope, elem, attrs) {
            $(document).ready(function() {
                $('[data-toggle="popover"]').popover();
            });

            elem.bind('click', function(e) {
                $('#notification').popover('toggle');
            })

            $('body').on('click', function (e) {
                //the 'is' for buttons that trigger popups
                //the 'has' for icons within a button that triggers a popup
                if (!elem.is(e.target)
                    && elem.has(e.target).length === 0
                    && $('.popover').has(e.target).length === 0) {
                    elem.popover('hide');
                }
            });
        }
    };
}]);

html代码:

<a popover tabindex="0" role="button"
   id="notification"
   data-toggle="popover" data-trigger="manual"
   data-container="body" data-placement="bottom"
   data-content="This is a popover">
   Popover button
</a>

它应该像使用data-trigger='click focus'一样简单，因为根据bootstrap:

弹出窗口如何触发-点击|悬停|焦点|手动。你可以传递多个触发器;用一个空格把它们分开。手动不能与任何其他触发器结合使用。

然而，由于未知的原因，同时使用点击和聚焦并不适合我，相反，我必须手动切换它。

这对我很管用。

分解:

首先，向主体添加一个单击事件侦听器。

单击，检查是否有一个带有弹窗类的元素(Bootstrap在解散时从DOM中删除弹窗元素)。

如果.popover元素存在，请检查事件。目标，它会告诉你用户在页面上点击了哪里。如果它是.popover元素的一部分，什么都不做。如果不是，隐藏弹窗(文档在这里)。

注意:aria- descripbedby条件可以防止弹窗在最初被触发/显示时被隐藏。

document.body。addEventListener('点击'，事件=> { let ispopoverdisplays = Boolean(document.querySelector('.popover')); let isclickknotpopover = !event.target. nearest ('.popover'); 如果( isPopoverShown & & isClickNotPopover & & ! event.target ? .getAttribute (aria-describedby) ? .startsWith(窗) ) { $ (' .popover ') .popover(隐藏的) ｝ })

如果你使用选择器委托创建弹出窗口，那么'hide'方法似乎不起作用，而必须使用'destroy'。

我是这样做的:

$('body').popover({
    selector: '[data-toggle="popover"]'
});

$('body').on('click', function (e) {
    $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('destroy');
        }
    });
});

关于这个课题JSfiddle

引导5更新:

$(document).on('click', function (e) {
    var
        $popover,
        $target = $(e.target);

    //do nothing if there was a click on popover content
    if ($target.hasClass('popover') || $target.closest('.popover').length) {
        return;
    }

    $('[data-bs-toggle="popover"]').each(function () {
        $popover = $(this);

        if (!$popover.is(e.target) &&
            $popover.has(e.target).length === 0 &&
            $('.popover').has(e.target).length === 0)
        {
            $popover.popover('hide');
        } 
    });
})