bootstrap 4.1.3下拉+正确+可滚动菜单=闪烁答案

【问题标题】：bootstrap 4.1.3 dropdown+proper+ scrollable-menu = blinkingbootstrap 4.1.3下拉+正确+可滚动菜单=闪烁
【发布时间】：2019-05-09 11:50:05
【问题描述】：

如果我添加到 dropmenu+popover 滚动，那么当我直接将鼠标悬停在正确位置时，它开始闪烁。我该如何解决？请帮帮我

for(var i =0;i<15;i++){
$('.dropdown-menu').append('<a class="dropdown-item" > helloWorld <button type="button" class="noneButton lockFont"  data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-trigger="hover"> <i class="fas fa-lock clockFont"></i></button></a>')
}

$('.lockFont').popover();
$('.lockFont').popover({ trigger: "hover" })

.dropdown-menu {

    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    
    
    
      <div class="dropdown ">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropdown button
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            
                    </div>
                    </div>

【问题讨论】：

标签： javascript jquery html twitter-bootstrap bootstrap-4

【解决方案1】：

使用mouseenter 代替popover 和data-trigger="focus" 试试这个

$('.lockFont').mouseenter(function(){
    $(this).trigger('focus');
});

//$('.lockFont').popover({ trigger: "hover" })

for(var i =0;i<15;i++){
$('.dropdown-menu').append('<a class="dropdown-item" > helloWorld <button type="button" class="noneButton lockFont"  data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-trigger="focus"> <i class="fas fa-lock clockFont"></i></button></a>')
}

$('.lockFont').popover();
//$('.lockFont').popover({ trigger: "hover" })
$('.lockFont').mouseenter(function(){
    $(this).trigger('focus');
});

$('body').mouseover(function (e) {
    $('.lockFont').each(function () {
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

.dropdown-menu {

    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    
    <body>
    
      <div class="dropdown ">
                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropdown button
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            
                    </div>
                    </div>
                    </body>

【讨论】：

如果鼠标从正确位置移出它不会删除。我怎样才能正确正确（箭头）
为此添加此代码是$('.lockFont').mouseout(function(){ $(this).blur(); });
如果我这样做了，$('.lockFont').mouseout(function(){ $(this).blur(); }); 然后它又开始闪烁了。
@forseti420 在你的 js 中明智地使用 $('body').mouseover(function(){}); 它已经解决了你的问题或检查更新的答案
谢谢，我找到了另一种方法：$('.lockFont').popover({ boundary:'window', });

【解决方案2】：

$('.lockFont').popover({
     boundary:'window',
});

【讨论】：