jQuery 当我将鼠标快速移出绘图时，flot 工具提示不会隐藏

Question

请查看 jQuery flot with tooltip 的示例，它位于 http://www.flotcharts.org/flot/examples/interacting/

当我放置鼠标并正常移动时，工具提示正常出现和消失。

但是当我将鼠标快速移出绘图时，工具提示将保留。

请看下面的动画 gif，其中显示了鼠标移动的缓慢和快速。

处理悬停的主要部分代码如下：

$("#placeholder").bind("plothover", function (event, pos, item) {

            if (item) {
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);

                $("#tooltip").html(item.series.label + " of " + x + " = " + y)
                    .css({top: item.pageY+5, left: item.pageX+5})
                    .fadeIn(200);
            } else {
                $("#tooltip").hide();
            }
    });

我认为是因为当我快速移动鼠标时$("#tooltip").hide();在$("#tooltip").html未渲染时执行。

Answer 1

#placeholder，即图形容器，绑定到 plotover 事件。
因此，当此容器元素上发生此类事件时，脚本会检查是否返回 item 以决定显示或隐藏工具提示。

现在，当您的鼠标在此容器之外时，不会再触发 plothover 事件。所以脚本没有执行隐藏tooltip。

为了解决这个问题，我会添加一个脚本，当鼠标离开容器时隐藏工具提示，如下所示：

$("#placeholder").on("mouseleave", function(){
  $("#tooltip").hide();
});

另外，请注意 .bind() is deprecated. It is preferable to use .on()。

编辑

我在第一次回答时没有考虑延迟。
在图表项目上快速移动鼠标时...工具提示显示动画有大约 600 毫秒的延迟。

所以 mouseleve 事件触发得太早，无法关闭它。

现在试试这个：

$(document).on("mousemove",function(e){
  if ( $(e.target).closest("#placeholder").length == 0 ){
    $("#tooltip").hide();
  }
});

所以现在，在 mousemove 上，此脚本将检查鼠标是否在他的任何孩子的图表容器上。如果没有，它会隐藏工具提示。

Answer 2

我觉得另一个答案的解释不完整：

出现问题是因为 hide() 在 fadeIn() 完成之前执行。并在 fadeIn() 的末尾隐式执行 show() 。

使用 fadeOut(1) 而不是 hide() 解决了这个问题，因为 fadeOut() 在 fadeIn() 之后是 queued 而不是像 [=10= 那样直接执行].

jQuery 当我将鼠标快速移出绘图时，flot 工具提示不会隐藏

jQuery flot the tooltip will not hide when I move the mouse quickly out of plot

html

javascript

jquery

flot

jquery-events