當鼠標移動到svg路徑元素內時，mouseout / mouseleave會被觸發

Question

我正在使用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>

請注意，我使用d3的符號類型（三角形向下）來生成路徑元素。

現在，這些元素與2個事件處理程序掛鈎：mouseover和mouseout以切換工具提示。

mouseover甚至可以正常工作。

但是，每次鼠標在path元素中移動時，mouseout事件都會被觸發; 當我移動鼠標時，工具提示會快速閃爍

我試過： - mouseleave事件，但它顯示了相同的行為我也增加了路徑元素的大小，以確保鼠標實際上沒有移出元素

任何想法，我該如何解決？

我在這里創建了JSbin - http://jsbin.com/mivihiyi/13/edit但是，我自己無法在那里重現它。 但是，問題仍存在於我的軟件中.. aaaaaaaaaaaaaa :(

這是我的代碼：

 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");
        }
      });

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

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

這是我的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;
}

Answer 1

以防萬一其他人有這個問題，找到這個頁面並像我一樣愚蠢：我有相同的症狀，但后來突然意識到我正在svg元素上繪制工具提示，我試圖添加工具提示至。 最終結果：只要工具提示可見，就會觸發mouseleave事件; 這當然是完全合理的，因為鼠標剛剛離開底層的svg元素，因為它現在位於工具提示的頂部。

解決方案：確保工具提示的位置使其不可能與鼠標位置重疊。

Answer 2

將元素上的pointer-events屬性設置為all（或者其他一些合適的值）

pointer-events="all"

無論填充如何，這都將使鼠標懸停工作。

Answer 3

我今天剛遇到同樣的問題，在谷歌搜索后我發現了這個問題。 就我而言，問題是我在我的上面設置了以下CSS屬性：

path { fill: none; }

這將導致鼠標過/關事件僅在路徑筆划上觸發， 而不在路徑區域內/外觸發。 要解決此問題，請將css更改為：

path { fill: transparent; }

這將設置鼠標事件的行為符合預期：進入區域時觸發鼠標懸停，當離開區域時觸發鼠標懸停。

看到這個小提琴： http ： //jsfiddle.net/xkya4cfp/1/