popover：在弹出窗口之外单击时关闭弹出窗口答案

【问题标题】：popover: close pop over when clicked outside of pop overpopover：在弹出窗口之外单击时关闭弹出窗口
【发布时间】：2012-12-21 18:30:05
【问题描述】：

我正在使用引导程序 v2.2.2。我尝试了其他一些方法（即：close popover outside popover but inside stay open 和 How to dismiss a Twitter Bootstrap popover by clicking outside? 也尝试了 BootstrapX clickover 插件：https://stackoverflow.com/a/11029479/1043817）但我无法通过这些方法使其工作。

我创建了一个 JSFiddle，其代码在我的页面上使用：http://jsfiddle.net/FYNLL/（虽然我使用的是 v2.2.2，但 JSFiddle 使用的是来自 v2.0.2 的 JS。我认为存在一些差异在这些版本中。当我在本地使用 v2.2.2 时，在单击链接之前不会显示弹出框。在 JSFiddle 中，它显示在悬停状态。要清楚，我希望在单击链接后显示它，不悬停）

我想要完成的是在单击弹出框之外的区域时隐藏弹出框。如果单击另一个弹出框链接，我希望关闭第一个弹出框并打开被点击的弹出框。

这也不是绝对必要的，但是当popover 在 .js 文件中时，我无法让它工作（我尝试过使用.each()）。我真的很想从我的 HTML 文件中删除 <script> $(function () { $("a[rel=popover]").popover(); });</script>。同样，这并不是真正的优先事项。

【问题讨论】：

在 JavaScript 中，据我所知，您无法处理甚至称为“吉米点击了 X 以外的其他地方”。总是必须有一个点击目标。此外，点击目标可能会调用stopPropagation 并防止点击冒泡到窗口，因此您不能将点击处理程序绑定到窗口并认为这会起作用。我认为您能做的最好的事情就是传递 {trigger: 'click'} 选项，并使其在点击时激活。当用户点击任何地方时它将关闭，我认为这是由于锚点上的模糊事件。小提琴也摆脱了

标签： jquery twitter-bootstrap

【解决方案1】：

// Universal Popupover Outside Click Close Method :)
jQuery(document).mouseup(function(e){ 
    var popocontainer = jQuery(".popover");
    if (popocontainer.has(e.target).length === 0){
        jQuery('.popover').toggleClass('in').remove();
    }
});

【讨论】：

为我工作。如果存在多个弹出框，这会删除所有弹出框吗？
在 google 和 SO 上搜索数小时后发现的最佳解决方案。向你致敬！

【解决方案2】：

侦听冒泡到文档的单击事件，并确定它的目标是否在弹出框内。如果没有，则隐藏它：

var popover = $('#someEl').popover(options);

$(document).on('click',function(e) {
   var src = $(e.target);

   if(src.hasClass('popover') || src.closest('popover').length) {
     $('#someEl').popover('hide');
   }
});

【讨论】：

你如何处理其他元素阻止冒泡的情况？
正如您在上面的评论中正确指出的那样，您不能，如果某个元素在其事件处理程序中调用了 return false 或 stopPropagation() ，则您无能为力。我发布的代码并不完美，但它是你能做到的最好的。
@bvukelic 你说的冒泡是什么意思？
简化了，当在 DOM 元素上触发事件时，它会传播到树上的所有父元素，一直到文档的根。这叫冒泡。理想情况下，如果您想测试是否点击了 X 以外的其他内容，您将检查点击是否传播到根目录。但是，元素可以防止冒泡。 en.wikipedia.org/wiki/DOM_Events#Event_flow
@adam，刚刚试过这个。似乎对我不起作用。当我单击链接时，弹出窗口根本不显示。

【解决方案3】：

解决方案都在 API 中提供。 http://twitter.github.com/bootstrap/javascript.html#popovers

查看options/trigger和方法：.popover('hide')

至于不从脚本文件运行，如果您将代码包装在 ready 处理程序中并且您的脚本文件在 bootstrap.js 之后加载，则没有理由不运行。使用浏览器控制台检查错误

【讨论】：