在弹出框外单击时隐藏引导弹出框

Question

当用户单击弹出框外的任何位置时，我试图隐藏 Bootstrap 弹出框。 （我真的不知道为什么 Bootstrap 的创建者决定不提供这个功能。）

我找到了下面的代码on the web但是我真的不明白。

// Hide popover on click anywhere on the document except itself
$(document).click(function(e) {
    // Check for click on the popup itself
    $('.popover').click(function() {
        return false; // Do nothing
    });  
    // Clicking on document other than popup then hide the popup
    $('.pop').popover('hide');  
});

让我感到困惑的主要是$('.popover').click(function() { return false; }); 这一行。这行不是为单击事件添加事件处理程序吗？这如何防止对 popover('hide') 的调用隐藏弹出框？

有没有人见过更好的技术？

注意：我知道这个问题的变体以前在这里被问过，但这些问题的答案涉及的代码比上面的代码更复杂。所以我的问题实际上是关于上面的代码

Answer 1

我做了http://jsfiddle.net/BcczZ/2/，希望能回答你的问题

示例 HTML

<div class="well>
    <a class="btn" data-toggle="popover" data-content="content.">Popover</a>
    <a class="btn btn-danger bad">Bad button</a>
</div>

JS

var $popover = $('[data-toggle=popover]').popover();

//first event handler for bad button
$('.bad').click(function () {
    alert("clicked");
});


$(document).on("click", function (e) {
    var $target = $(e.target),
    var isPopover = $target.is('[data-toggle=popover]'),
        inPopover = $target.closest('.popover').length > 0

    //Does nothing, only prints on console and wastes memory. BAD CODE, REMOVE IT
    $('.bad').click(function () { 
        console.log('clicked');
        return false;
    });

    //hide only if clicked on button or inside popover
    if (!isPopover && !inPopover) $popover.popover('hide');
});

正如我在评论中提到的，事件处理程序不会被覆盖，它们只是堆叠。由于.bad 按钮上已经有一个事件处理程序，它将与任何其他事件处理程序一起被触发

在 jsfiddle 中打开您的控制台，在页面某处按下 5 次（不是弹出按钮），然后单击 bad button，您应该会看到 clicked 打印的次数与您按下的次数相同

希望对你有帮助

---

附注： 如果你仔细想想，你已经看到了这种情况，尤其是在 jQuery 中。 想想使用多个 jquery 插件的页面中存在的所有$(document).ready(...)。该行只是在文档的ready 事件上注册了一个事件处理程序

Answer 2

我刚刚做了一个更基于事件的解决方案。

var $toggle = $('.your-popover-button');
$toggle.popover();

var hidePopover = function() {
    $toggle.popover('hide');
};

$toggle.on('shown', function () {
    var $popover = $toggle.next();
    $popover.on('mousedown', function(e) {
        e.stopPropagation();
    });
    $toggle.on('mousedown', function(e) {
        e.stopPropagation();
    });
    $(document).on('mousedown',hidePopover);
});

$toggle.on('hidden', function () {
    $(document).off('mousedown', hidePopover);
});

Answer 3

简短的回答 将此插入到 bootstrap min.js

当popout onblur 会隐藏popover
当弹出多个时，旧的弹出框将被隐藏

$count=0;$(document).click(function(evt){if($count==0){$count++;}else{$('[data-toggle="popover"]').popover('hide');$count=0;}});$('[data-toggle="popover"]').popover();$('[data-toggle="popover"]').on('click', function(e){$('[data-toggle="popover"]').not(this).popover('hide');$count=0;});

Answer 4

以上解决方案都没有对我 100% 有效，因为我必须在另一个或相同的弹出窗口上单击两次才能再次打开它。我从头开始编写解决方案，简单有效。

   $('[data-toggle="popover"]').popover({
        html:true,
        trigger: "manual",
        animation: false
    });

    $(document).on('click','body',function(e){
        $('[data-toggle="popover"]').each(function () {
            $(this).popover('hide');
        });

        if (e.target.hasAttribute('data-toggle') && e.target.getAttribute('data-toggle') === 'popover') {
            e.preventDefault();
            $(e.target).popover('show');
        }
        else if (e.target.parentElement.hasAttribute('data-toggle') && e.target.parentElement.getAttribute('data-toggle') === 'popover') {
            e.preventDefault();
            $(e.target.parentElement).popover('show');
        }
    });

Answer 5

我的解决方案，适用于 Bootstrap v3 100%

$('html').on('click', function(e) {
    if(typeof $(e.target).data('original-title') !== 'undefined'){
         $('[data-original-title]').not(e.target).popover('hide');
    }

    if($(e.target).parents().is('[data-original-title]')){
         $('[data-original-title]').not($(e.target).closest('[data-original-title]')).popover('hide');
    }

    if (typeof $(e.target).data('original-title') == 'undefined' &&
!$(e.target).parents().is('.popover.in') && !$(e.target).parents().is('[data-original-title]')) {
        $('[data-original-title]').popover('hide');
    }
});