javascript - 如何避免弹出框闪烁

问题描述

运行片段
点击弹出按钮。
弹出窗口出现，拖放到屏幕上的任意位置
现在单击两次弹出按钮。
popover 再次出现在之前离开的相同位置。
但是会发生几分之一秒的闪烁。有什么办法可以避免这种闪烁，请建议？

到目前为止，我已经尝试使用在 popover 出现之前触发的这个事件“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>

标签： javascriptjquery

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

javascript - 如何避免弹出框闪烁

问题描述

解决方案

推荐阅读