如何禁用内部元素的弹出行为答案

【问题标题】：How to disable popover behaviour for an inner element如何禁用内部元素的弹出行为
【发布时间】：2017-11-28 05:20:02
【问题描述】：

我有一个容器，里面有一些细节和一个按钮。当我们将鼠标悬停在容器上时，容器具有弹出行为。问题是我需要在将鼠标悬停在其中的按钮上时禁用弹出行为。继承人 fiddle 在此先感谢。

<div class="container">
  <p>name: </p>
  <p>age: </p>
  <p>department:</p>
  <button class="btn btn-primary">Connect</button>
</div>

$('.container').popover({
    trigger: "hover",
    content: "sample content"
})

【问题讨论】：

标签： javascript jquery bootstrap-4 bootstrap-popover

【解决方案1】：

将以下代码添加到 JavaScript 块中。

$('.container button').mouseover(function(e) {
    $('.container').popover('hide');
});

$('.container button').mouseout(function(e) {
    $('.container').popover('show');
});

【讨论】：

【解决方案2】：

你可以这样做：

$('.container button').hover(function(){
    $('.container').popover('hide');
},function(){
  $('.container').popover('show');
});

小提琴：https://jsfiddle.net/fwcrt2hy/

【讨论】：

【解决方案3】：

我建议...

$('.container p').popover({
    trigger: "hover",
    content: "sample content"
});

（即将选择器更改为.container p）因为.container 中的唯一内容除了<button> 是段落（<p>）元素。

可能的缺点

如果您的.container 有填充，则填充区域不会触发popover 行为。

【讨论】：

是的，我已经尝试过了，但问题是我在多个不同布局的地方使用它，所以我需要使用“容器”作为选择器。

【解决方案4】：

您可以在popover() 方法中使用selector 选项。如果提供了选择器，弹出框对象将被委托给指定的目标。实际上，这用于启用动态 HTML 内容以添加弹出框。

$(function () {
    $('.container').popover({
        trigger: "hover",
        content: "sample content",
        selector: 'p'    //added this line
    })
});

来源：https://getbootstrap.com/docs/4.0/components/popovers/#options

【讨论】：