jquery - jQuery - Twitter Bootstrap - 关闭身体的任何元素焦点上的所有弹出框

Question

我正在尝试关闭任何popover打开时any body element（不是弹出框本身）is focused，

所以我这样做：

 $(document.body).on('focus focusout focusin', function(e) {
  if( e.target.classList.contains('popover') ){return false;}
  else{
    $('*').popover('hide');
  }
  // code to close the popover
});

这在弹出窗口关闭之前效果很好，Chrome但不适用于FF我FF需要。focusin and focusout

这是我仅适用于 chrome 的示例：http: //jsfiddle.net/CU5U5/4/

我怎样才能解决这个问题？

Answer 1

替代：

$(document).on('focus', ':not(.popover)', function(){
    $('.popover').popover('hide');
});

编辑：

事实证明，我上面的答案是不正确的。您需要在实例化 popover 的元素上调用 .popover('hide') ......而不是 .popover 本身。并且您需要停止在链接上传播单击事件（即，在单击处理程序中返回 false），这样它就不会冒泡到文档根目录。看到这个答案，http://jsfiddle.net/aFacG/1/。

HTML

<a data-content="a popover" id="mypopover" href="#">click me</a>

JS

$(document).ready(function(){
  $("#mypopover").popover();

  $(document).on('click', function(){
      $("#mypopover").popover('hide');
  });

  $('#mypopover').click(function(){
      return false;
  });
});

Answer 2

当前接受的答案的问题是，即使您在工具提示内单击，弹出框也会隐藏（如果您在弹出框内有要与之交互的元素，则不好......就像输入字段一样）。

使用 popover 容器上的stopPropagation方法来防止 hide 事件使 DOM 冒泡。

更新（引导网址已更改）：http: //jsfiddle.net/bNvX7/10/

$(document).ready(function(){

    //Initialize popover on element
    $("#mypopover").popover();

    //Attach click handler to document
    $(document).bind('click', function (e) {
        $("#mypopover").popover('hide');
    });

    //Dont hide when I click anything inside #container
    $('#container').bind('click', function(e) {
        e.stopPropagation();
    });
});

Answer 3

非常简单：

$('.popover').remove();

Answer 4

打电话

$('.popover').popover('hide');

将关闭所有当前打开的弹出窗口。

Answer 5

这是一种稍微通用的方法，它只需要一个处理程序，适用于切换/链接包含属性 data-rel="popover" 的所有弹出框，例如：

HTML

<a href="#" data-rel="popover">toggle</a>

JS

  $(document).on('click', function(event) {
    var $clicked = $(event.target);

    if ($clicked.closest('[data-rel="popover"]').length) {
      return;
    } else if ($clicked.closest('.popover').length) {
      event.stopPropagation();
    } else {
      $('[data-rel="popover"]').popover('hide');
    }
  });

Answer 6

也许你可以试试这个：

        // Part 1: initialize the popver
        var button = template.find(".itemInfo button");
        // add a class name to identify the target later.
        button.addClass("popover-toggle");

        var content = $("<div>test</div>");

        button.popover({
            container:"body",
            content: content,
            html:true,
            placement:"top",
            title:"Popover title",
            trigger:'click'
        });

        // Part 2: add click event listener 
        $(document).on("click", function(event){
            var target = $(event.target);
            $.each( $(".popover-toggle"), function(index, value){
                var _target = $(value);
                // not click on the button and not click on the popover it self
                if( !target.is( _target ) && target.closest(".popover").length == 0 ){
                    _target.popover("hide");
                }
            });
        });

不是最佳实践，但它在 Chrome 和 FF 上都可以正常工作。