如何防止popover div在点击里面进行隐藏以获取twitter bootstrap“dischable popover”（data-trigger =“focus”）？ [英] How to prevent the popover div for hiding on clicking inside it for twitter bootstrap "dismissible popover"(data-trigger="focus")?
问题描述
我有一个不受欢迎的popover（data-trigger =focus），里面有一个文本框。但是，只要我点击文本框内键入它消失，因为数据触发=焦点。我怎么让智能不会消失点击里面呢？这是我的HTML：
< head>< script src =http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery .min.js>< / script>
< script src =http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js>< / script>< / head>
< body>< div>< a class =BookAppButtonhref =data-toggle =popoverdata-html =truedata-placement = bottomdata-trigger =focus>点击此处< / a>< / div>< / body>
这是我的jquery：
$（document）.ready（function（）{
$（'。BookAppButton'）。click（function（event）{
event.preventDefault（）;
console.log（Button Clicked ..）;
}）;
$（'。BookAppButton'）。popover（{
title：''，
html：'tru e'，
content：'< div style =border：black 2px solid>< p>输入名称：< input type =text>< / input>< / p> ;< / div>'
}）;
}）;
这是我的jsfiddle链接：
http://jsfiddle.net/3g3o4xhw/
我在我的智慧结束..请帮助..在此先感谢。
点击popover隐藏popover，因为它们在窃取浏览器的焦点。只要按钮失去焦点，弹出窗口就会隐藏（因为我们设置了 data-trigger =focus）。
为了解决您询问的确切问题：
防止弹出窗口div隐藏里面它的twitter引导disable popover（data-trigger =focus）？
解决这个问题的最简单方法是阻止弹出窗口内的点击窃取焦点：$ b
$ b
- 添加一个事件侦听器来捕捉弹出窗口中的点击
这会停止
mousedown 上添加事件侦听器，以避免被盗取，从而阻止popover被关闭。 c $ c>而不是点击，因为那是当浏览器设置焦点时。
更多深入解释我们为什么使用 mousedown 和 preventDefault（）可以在这个StackOverflow中找到答案：
点击div时预防点火焦点事件
）$（'body'）.on（'mousedown'，'.popover'，function（e）{console.log（clicked popover）e.preventDefault（）}）;
< html>< body> < script src =https://code.jquery.com/jquery.min.js>< / script> < link href =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css =stylesheettype =text / css/> < script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js>< / script> < a tabindex =0class =btn btn-dangerdata-toggle =popoverdata-trigger =focustitle =Dismissdata-content =点击此处不会窃取焦点> ;允许的弹出窗口< / a>< / body>< / html>
I have a a dismissible popover(data-trigger="focus") with a text box inside it. But as soon as I click inside the text box to type it dissappear because of the "data-trigger="focus". How do I make the div intelligently not disappear on click inside it? Here is my html :
<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script></head>
<body><div><a class="BookAppButton" href="" data-toggle="popover" data-html="true" data-placement="bottom" data-trigger="focus">Click Here</a></div></body>
Here is my jquery :
$(document).ready(function(){
$('.BookAppButton').click(function(event){
event.preventDefault();
console.log("Button Clicked..");
});
$('.BookAppButton').popover({
title : '',
html : 'true',
content:'<div style="border:black 2px solid"><p>Enter name : <input type="text"></input></p></div>'
});
});
This is my jsfiddle link :
http://jsfiddle.net/3g3o4xhw/
I am at my wits end.. please help.. Thanks in advance.
解决方案 Clicks on the popover are hiding that popover because they are stealing the browser's focus. As soon as the button loses focus, the popover will be hidden (because we've set data-trigger="focus").
To address exact question you asked:
prevent the popover div for hiding on clicking inside it for twitter bootstrap "dismissible popover"(data-trigger="focus")?
The simplest way to fix this is to prevent clicks inside the popover from stealing focus by:
- Adding an event listener to catch clicks inside the popover
- Calling
preventDefault() on the caught event
This will stop the focus from being stolen, and so stop the popover from being closed.
Note: We need to add the event listener on mousedown rather than click, because that is when the focus is set by the browser.
A more in-depth explanation of why we use mousedown and preventDefault() can be found on this StackOverflow answer:
Prevent firing focus event when clicking on div
$(function() {
$('[data-toggle="popover"]').popover()
})
$('body')
.on('mousedown', '.popover', function(e) {
console.log("clicked inside popover")
e.preventDefault()
});
<html>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<a tabindex="0" class="btn btn-danger" data-toggle="popover" data-trigger="focus" title="Dismissible" data-content="Clicks in here won't steal focus">
Dismissible popover
</a>
</body>
</html>
这篇关于如何防止popover div在点击里面进行隐藏以获取twitter bootstrap“dischable popover”（data-trigger =“focus”）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
