在Popover外点击隐藏Bootstrap Popover

Question

当用户单击弹出器之外的任何地方时，我都试图隐藏Bootstrap popover。(我真的不知道为什么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按钮上已经有一个事件处理程序，它将与任何其他事件处理程序一起被触发。

打开您的控制台，在页面的某个地方按5次(不是弹出按钮)，然后单击bad button，您应该看到按下的次数与单击的次数相同。

希望它能帮上忙

P.S:，如果你想一想，你已经看到这种情况发生了，特别是在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

简短的答案插入到引导min.js

当弹出模糊时会隐藏波波夫

当弹出不止一个时，旧的弹出就会被隐藏。

$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;});