9

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

我在网上找到了以下代码，但我真的不明白。

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

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

有人见过更好的技术吗？

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

4

5 回答 5

8

我做了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您应该看到单击打印的次数与您按下的次数相同

希望能帮助到你

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

于 2013-07-24T19:26:27.803 回答
1

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

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);
});
于 2014-04-25T14:01:42.663 回答
0

简短回答将此插入到引导 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;});
于 2015-09-08T14:25:28.523 回答
0

我的解决方案，适用于 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');
    }
});
于 2018-04-25T21:28:03.217 回答
0

上述解决方案都没有对我 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');
        }
    });
于 2017-05-11T08:20:32.683 回答