javascript - 在 Popover 外部单击时隐藏 Bootstrap Popover

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 事件上注册了一个事件处理程序