当鼠标移动到svg路径元素内时，mouseout / mouseleave会被触发

I am creating a timeline using d3 library. It have few path elements inside a parent SVG element like this:

我正在使用d3库创建时间轴。它在父SVG元素中有很少的路径元素，如下所示：

 <path d="M0,5.26429605180997L6.078685485212741,-5.26429605180997 -6.078685485212741,-5.26429605180997Z" transform="translate(585,61)scale(0.8)" style="fill: rgb(0, 0, 0);"></path>

Note that, I am using d3's symbol type (triangle-down) to generate the path element.

请注意，我使用d3的符号类型（三角形向下）来生成路径元素。

Now, these elements are hooked with 2 event handlers: mouseover and mouseout to toggle the tooltip.

现在，这些元素与2个事件处理程序挂钩：mouseover和mouseout以切换工具提示。

mouseover even works fine.

mouseover甚至可以正常工作。

However, the mouseout event gets fired every time mouse moves within the path element; which makes the tooltip flicker rapidly as I move the mouse

但是，每次鼠标在path元素中移动时，mouseout事件都会被触发;当我移动鼠标时，工具提示会快速闪烁

I tried:- mouseleave event as well, but it shows the same behaviour I also increased the size of path element to make sure that mouse was not actually moving out of the element

我试过： - mouseleave事件，但是它显示了相同的行为我也增加了路径元素的大小，以确保鼠标实际上没有移出元素

Any ideas, how can I fix it?

任何想法，我该如何解决？

I created JSbin here - http://jsbin.com/mivihiyi/13/edit However, I myself am not able to reproduce it there. but, it the problem persists in my software .. aaaaaaaaaaaaaaa :(

我在这里创建了JSbin - http://jsbin.com/mivihiyi/13/edit但是，我自己无法在那里重现它。但是，问题仍存在于我的软件中.. aaaaaaaaaaaaaa :(

Here ismy code:

这是我的代码：

 g.each(function(d, i) {
    d.forEach( function(datum, index){
      var data = datum.times;

      g.selectAll("svg").data(data).enter()
        .append('path')
        .attr("class", "point")
        .attr("d", d3.svg.symbol().type("triangle-up"))
        .attr("transform", function(d) { return "translate(" + getXPos(d, i) + "," + getStackPosition(d, i) + ")scale(2)"
      })
      .on({
        mouseover: function(d) 
        {
          tooltip.html('I am a tooltip');
          tooltip.style("top", (d3.event.pageY - 40)+"px").style("left",(d3.event.pageX-15)+"px");
          tooltip.style("visibility", "visible");                               
        },
        mouseleave: function(d) { 
            tooltip.style("visibility", "hidden");
        }
      });

And i am initializing the tooltip at the top like this :

我正在顶部初始化工具提示，如下所示：

 var tooltip = d3.select('#timeline1')
        .append("div")
        .attr("class", "timeline-tooltip")
        .style("visibility", "hidden")
        .text("Invalid Date");

here is my css

这是我的CSS

.timeline-tooltip {

  color: black;
    font-size: x-small;
    border-top-width: 5px;
    border-top-color: rgb(149, 206, 254);
    border-top-style: solid;
    padding: 5px 10px 5px 10px;
    text-transform: uppercase;
    box-shadow: 2px 2px 2px rgba(105, 102, 102, 0.7);
    position: fixed;
    z-index: 10;
}

3 个解决方案

#1

Just in case anyone else has this problem, finds this page and is as stupid as I am: I had the same symptoms, but then suddenly realised that I was drawing the tooltip on top of the svg element that I was trying to add the tooltip to. Net result: as soon as the tooltip was made visible, the mouseleave event fired; which is of course entirely reasonable since the mouse had just left the underlying svg element, because it was now on top of the tooltip.

以防万一其他人有这个问题，找到这个页面并像我一样愚蠢：我有相同的症状，但后来突然意识到我正在svg元素上绘制工具提示，我试图添加工具提示至。最终结果：只要工具提示可见，就会触发mouseleave事件;这当然是完全合理的，因为鼠标刚刚离开底层的svg元素，因为它现在位于工具提示的顶部。

Solution: make sure that the tooltip is positioned so that it cannot possibly overlap where the mouse is.

解决方案：确保工具提示的位置使其不可能与鼠标位置重叠。

#2

set the pointer-events attribute on the element to all (or some other suitable value for you)

将元素上的pointer-events属性设置为all（或者其他一些合适的值）

pointer-events="all"

This will make mouseover work regardless of the fill.

无论填充如何，这都将使鼠标悬停工作。

#3

I just encountered the same problem today, and after googling around I found this question. In my case, the issue was I set the following CSS property on my :

我今天刚遇到同样的问题，在谷歌搜索后我发现了这个问题。在我的情况下，问题是我在我的上面设置了以下CSS属性：

path { fill: none; }

路径{fill：none; }

This will cause mouse over/out events to trigger only on the path stroke, NOT inside/outside path area. To fix it, change css to:

这将导致鼠标过/关事件仅在路径笔划上触发，而不在路径区域内/外触发。要解决此问题，请将css更改为：

path { fill: transparent; }

路径{填充：透明; }

This will set the mouse events to behave as expected: trigger mouseover when enters area and mouseout when leaves area.

这将设置鼠标事件的行为符合预期：进入区域时触发鼠标悬停，当离开区域时触发鼠标悬停。

See this fiddle: http://jsfiddle.net/xkya4cfp/1/

看到这个小提琴：http：//jsfiddle.net/xkya4cfp/1/

#1