到目前为止,我已经尝试使用此事件“ show.bs.popover”,该事件在弹出窗口出现之前立即触发,似乎可以在此处进行一些操作来避免这种闪烁,但未能实现。
您可以使用此链接查看问题或运行代码段:
https://jsfiddle.net/girinishantg/w9cgzayj/72/
需要避免发生闪烁。
$(document).ready(function () {
var gTop = 0;
var gLeft = 0;
$('[data-toggle="popover"]').popover({
placement: 'bottom'
});
$('#notesButton').on('show.bs.popover',
function () {
// alert('show.bs.popover');
});
$('#notesButton').on('shown.bs.popover',
function () {
//alert('shown.bs.popover');
var popoverId = $(this).data('bs.popover').tip.id;
$('#' + popoverId).css({ top: parseFloat(gTop), left: parseFloat(gLeft) });
$('#' + popoverId).on('mousedown', function (e) {
$(this).addClass('active');
var oTop = e.pageY - $('.active').offset().top;
var oLeft = e.pageX - $('.active').offset().left;
$(this).parents().on('mousemove', function (e) {
$('.active').offset({
top: e.pageY - oTop,
left: e.pageX - oLeft
});
});
$(this).on('mouseup', function () {
$(this).removeClass('active');
console.log("mouseup");
var ID = $('#' + popoverId);
gTop = $(this).css("top");
gLeft = $(this).css("left");
console.log($(this).css("top"));
console.log($(this).css("left"));
console.log("********************");
});
return false;
});
});
});
.active {
z-index: 2;
}
.bs-example{
margin: 150px 50px;
}
<html>
<head>
<title></title>
<!--script tags should go in the header -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="canonical" href="https://popper.js.org/">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="popover-demo mb-2">
<button id="notesButton" type="button" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Default popover">Popover</button>
</div>
<p><strong>Note:</strong> Click on the buttons to display/hide the popover.</p>
</body>
</html>
答案 0 :(得分:0)
您可以在屏幕上的任何位置禁用点击事件弹出框。
$('body').on('click', function (e) {
$('[data-toggle=popover]').each(function () {
// hide any open popovers when the anywhere else in the body is clicked
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});