从悬停触发的弹出框快速滚动不会隐藏弹出框答案

【问题标题】：Quickly scrolling away from hover-triggered popover does not hide popover从悬停触发的弹出框快速滚动不会隐藏弹出框
【发布时间】：2020-03-06 00:23:08
【问题描述】：

我正在为表格中某些突出显示的行使用悬停触发的弹出框，当您使用鼠标滚轮相对快速地滚动离开元素时，即使您不再悬停在目标元素。它会产生一种奇怪的效果，弹出框从您滚动到的方向滚动，移到表格边框之外。

下面是一些示例代码：

 $('.popover_class').popover({
   trigger: 'hover',
   placement: 'right'
 })

&lt;tr class="bg-warning popover_class" data-toggle="popover" data-content="example"&gt;&lt;/tr&gt;

我尝试了多种解决方案，包括在使用上面的代码初始化后隐藏滚动事件时的弹出框：

$('.popover_class').on('scroll', function() {
      this.popover('hide');
});

使用 bootstrap 4、popper.js 1.15、jquery 3.4、DataTables。

谢谢

【问题讨论】：

也许你的 CSS 中有过渡？

标签： javascript jquery css bootstrap-4 popper.js

【解决方案1】：

将弹出框动画设置为 false（默认为 true），这将停止对弹出框应用 CSS 淡入淡出过渡。

 $('.popover_class').popover({
   trigger: 'hover',
   placement: 'right',
   animation: false
 });

您尝试过在鼠标滚动上触发弹出框隐藏将不起作用，因为相同的动画效果将被触发。

【讨论】：

虽然这并没有解决手头的问题（实际上，我觉得它应该......），但它有助于解决我一直试图消除的其他一些行为。谢谢
更新：我在 Firefox 中测试问题仍然存在。然而，这完全解决了 Edge 中的问题，并在 Chrome 中大大改进了它（尽管如果你滚动得足够快，弹出框仍然会在几秒钟内滚动到表格的边界之外）。

【解决方案2】：

我在 JQuery DataTable 控件中显示引导弹出框时遇到了类似的问题。

如上图所示，当用户单击剪贴板图标时会显示弹出消息。当用户单击除 DataTable 滚动条之外的任何其他位置时，弹出框隐藏。当用户滚动 DataTable 时，弹出框没有隐藏，而是显示在表格之外。

为了处理这种情况，我在剪贴板图标上使用了 mouseleave 事件，如下所示，

    $(tableId).off('mouseleave', '.btn-clipboard').on('mouseleave', '.btn-clipboard', function (event: JQueryEventObject) {

        if (event.currentTarget) {
            let controlId = event.currentTarget.id;
            $('#'+controlId).popover("hide");
        }
    });

因此，当鼠标离开剪贴板图标图像时，弹出框将隐藏。我希望它可以帮助/提供一些想法。

【讨论】：