Question

当用户点击popover外的任何地方时，我正试图隐藏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; });。这行不为click事件添加事件处理程序吗？这是如何阻止隐藏弹出窗口后跟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你应该看到点击打印的次数与你按下的次数相同

希望有所帮助

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

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

当popout onblur将隐藏popover
时当popout不止一个时，旧的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

我的解决方案，100％工作，适用于Bootstrap v3

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

在点击外部弹出窗口隐藏Bootstrap Popover

5 个答案: