jQuery $('.class').is(":hover") 在 Firefox 中需要超时才能 return true

Question

我为 svg 圆圈设置了 mouseout 事件。

在鼠标移出时，进行了一些测试以查看工具提示或背景层是否悬停。如果它们悬停在那里，尖端会保持向上；如果他们不这样做，它就会被带走。

提示有一个 div（没有背景）延伸到圆圈周围的区域。代码是：

                var isHoveredTip = $('.tipcontainer').is(":hover");
                var isHoveredOverlay = $('.mouseOverlay').is(":hover");

                //test if the user is mousing over the tip area
                if (isHoveredOverlay == true || isHoveredTip == true) {

                   //if the user is hovering the tip, take away the tip once they leave the tip area
                  $(".tipcontainer").on('mouseleave',function() {
                    d3.select(that).attr("r",(pointRadius) + "px");
                    tooltip.style("visibility","hidden").style("transition","visibility .0s linear .0s,opacity 0s linear");
                    d3.selectAll(".tipChart").remove();
                  });
                }
                 // take away the tip if they're not hovering
                else {

                  d3.select(that).attr("r",(pointRadius) + "px");
                  tooltip.style("visibility","hidden").style("transition","visibility .15s linear .15s,opacity 0s linear");
                  d3.selectAll(".tipChart").transition().duration(300).remove();
                }

Chrome 一切都是肉汁。 Firefox 给我带来了问题。如果我将超时设置为几毫秒，则 isHoveredTip 和 isHoveredOverlay 变量仅 return 为真。就好像元素没有在鼠标移出圆圈时呈现。如果我确实设置了那个超时，它会产生附带问题，代码需要条件判断其他圆圈是否被鼠标悬停，这会创建一个代码链。

如何让 Firefox 在没有超时的情况下注册悬停事件？

Answer 1

我通过使用 d3.mouse(this) 解决了这个问题，只是测试鼠标是否沿工具提示的方向（负 y 方向）移动。 jQuery 和 svg 在悬停事件中表现不佳。

              var coordinates = [0, 0];
              coordinates = d3.mouse(this);
              var x = coordinates[0];
              var y = coordinates[1];

              var testTip = function () {

                if (coordinates[1] < 0) { 
                    // do stuff
             }}

无论如何，这似乎是一种更适合 D3 的方式来处理这个问题。

jQuery $('.class').is(":hover") 在 Firefox 中需要超时才能 return true

jQuery $('.class').is(":hover") needs a timeout in Firefox to return true

jquery

svg

d3.js

settimeout

jquery-hover