当用户点击空白处时，如何关闭Bootstrap弹出框（或其他任何项目）？

Question

我正在手动使用Twitter的Bootstrap库中的popover对象，我想知道当用户点击其它区域时如何关闭工具提示。

这是我的HTML代码：

<a id="stats-bar" rel="popover" data-placement="top" data-trigger="manual" data-title="Title here" data-content="Hello everyone.">Test</a>

以及我的JavaScript代码：

$('#stats-bar').click(function(e) {
        $(this).popover('show');
});

当用户点击弹出窗口以外的任何地方时，我该如何隐藏弹出窗口？我考虑使用一个固定的透明 div 放在弹出窗口后面，并设置其点击事件，但我不确定这是最好的方法。

- Jake Petroules

Answer 1

我最终将其连接到文档点击事件，并在此时隐藏任何工具提示。

      $(document).click(function (e)
      {
          // check the parents to see if we are inside of a tool tip.  If the click came
          // from outside the tooltip, then hide our tooltip
          if ($(e.target).parents('.tooltip').length == 0) $('[data-original-title]').tooltip('hide');
      });

如果你正在使用手动触发选项并绑定到click事件以显示工具提示，那么你需要调用e.stopPropagation()来防止在显示工具提示时文档click事件的触发。

- Kevin

---

这应该是答案，这是我看到的最干净、最简单的解决方案。 - Robert Petz

Answer 2

我选择在弹出框后面使用一个固定的透明div，并将其点击事件设置为这似乎是最稳健和简单的解决方案。

- Jake Petroules

Answer 3

如何创建一个通用的点击事件监听器，无论你在页面的哪个位置点击都能触发它？看看这篇文章，它似乎与你想要实现的功能类似。

https://dev59.com/qkvSa4cB1Zd3GeqPfIQi#2125122

您可以使用此功能来关闭实际的弹出窗口。

$('#stats-bar').popover('hide')

当弹出事件运行时，我只会定义函数，然后在关闭弹出窗口后将其删除，这样您就不会不断地监听点击事件。

- leejmurphy