当用户点击时，如何关闭Bootstrap弹出窗口(或任何项目）

How to close Bootstrap popovers (or any item in general) when a user clicks away from it?

本文关键字：窗口 任何 项目 Bootstrap 用户 何关闭      更新时间：2023-09-26

我正在手动模式下使用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');
});

当用户单击除popover本身之外的任何位置时，我如何隐藏popover？我曾想过在popover后面使用一个固定的透明div并设置其点击事件，但我不确定这是最好的方法。

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

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

如果使用手动触发器选项并连接到单击事件以显示工具提示，则需要调用e.stopPropagation（）以防止在显示工具提示时触发文档单击事件。

我选择在popover后面使用一个固定的透明div，并设置其点击事件，因为这似乎是最健壮、最简单的解决方案。

一个通用的点击事件监听器会触发你在身体内的点击位置吗？看看这篇文章，它看起来和你想要实现的目标很相似。

https://stackoverflow.com/a/2125122/1013422

你可以用它来关闭实际的弹出

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

我只会在弹出事件运行时定义该功能，然后在关闭弹出后将其删除，这样你就不会一直监听点击事件。

相关文章：