jQuery - Twitter Bootstrap - 关闭 body 的任何元素焦点上的所有弹出框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14285082/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - Twitter Bootstrap - close all popovers on body's any elements focus
提问by itsme
I'm trying closing any popoveris opened when any body element(not the popover itself) is focused,
我正在尝试关闭任何popover打开时any body element（不是弹出窗口本身）is focused，
so i do:
所以我这样做：
$(document.body).on('focus focusout focusin', function(e) {
if( e.target.classList.contains('popover') ){return false;}
else{
$('*').popover('hide');
}
// code to close the popover
});
this works great on Chromebut not on FF, on FFi need to focusin and focusoutbefore the popover is closed.
这对伟大工程Chrome，但不是FF上FF我需要focusin and focusout之前酥料饼被关闭。
here is my example working only for chrome: http://jsfiddle.net/CU5U5/4/
这是我仅适用于 chrome 的示例：http: //jsfiddle.net/CU5U5/4/
How can i fix this?
我怎样才能解决这个问题？
回答by joeltine
An alternative:
替代：
$(document).on('focus', ':not(.popover)', function(){
$('.popover').popover('hide');
});
Edit:
编辑：
So as it turns out, my above answer is incorrect. You need to call .popover('hide') on the element the popover was instantiated on... not the .popover itself. AND you need to stop propagation of the click event on the link (i.e., return false in click handler) so it doesn't bubble up to the document root. See this for an answer, http://jsfiddle.net/aFacG/1/.
所以事实证明，我上面的答案是不正确的。您需要在 popover 实例化的元素上调用 .popover('hide') ......而不是 .popover 本身。并且您需要停止在链接上传播点击事件（即，在点击处理程序中返回 false），这样它就不会冒泡到文档根目录。请参阅此答案，http://jsfiddle.net/aFacG/1/。
HTML
HTML
<a data-content="a popover" id="mypopover" href="#">click me</a>
JS
JS
$(document).ready(function(){
$("#mypopover").popover();
$(document).on('click', function(){
$("#mypopover").popover('hide');
});
$('#mypopover').click(function(){
return false;
});
});
回答by Jose Browne
The problem with the current accepted answer is that popover hides even when you click inside the tooltip (bad if you have an element you want to interact with inside the popover..like an input field).
当前接受的答案的问题是，即使您在工具提示内单击，弹出框也会隐藏（如果您有要在弹出框内与之交互的元素..就像输入字段，那就不好了）。
Use the stopPropagationmethod on your popover container to prevent the hide event from bubbling up the DOM.
在 popover 容器上使用stopPropagation方法来防止隐藏事件冒泡 DOM。
UPDATE(bootstrap url changed):http://jsfiddle.net/bNvX7/10/
更新（引导程序网址已更改）：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();
});
});
回答by Samuel
Being very simplistic:
非常简单：
$('.popover').remove();
回答by Sean Bradley
Calling
打电话
$('.popover').popover('hide');
will close all currently opened popovers.
将关闭所有当前打开的弹出窗口。
回答by mynameistechno
Here's a slightly more generic approach that requires just one handler and works for all popovers where the toggle/link contains attribute data-rel="popover", e.g.:
这是一种稍微更通用的方法，它只需要一个处理程序，适用于切换/链接包含属性 data-rel="popover" 的所有弹出窗口，例如：
HTML
HTML
<a href="#" data-rel="popover">toggle</a>
JS
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');
}
});
回答by Kimi Chiu
Maybe you could try this:
也许你可以试试这个：
// 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");
}
});
});
Not the best practice but it works fine on both Chrome and FF.
不是最佳实践，但它在 Chrome 和 FF 上都可以正常工作。
