尝试在节点上设置鼠标悬停，但节点的标签会触发多个事件

Question

我正在尝试在D3节点上设置简单的mouseover和mouseout事件。一切正常，唯一的问题就是我在节点上有标签。当我鼠标悬停在节点上时，我得到了事件，但是当我鼠标悬停在同一节点的标签上时，它会导致鼠标悬停事件再次触发，而我不会离开节点，就像我进入并从节点本身移出一样。我的更新代码：

            var isInside = function (node:any, target:any) {
                for (; node != null; node = node.parentNode) {
                    if (node === target[0][0].outerHTML) {
                            return true;
                    }
                }
            };


          svg.selectAll("g.node").on("mouseover", function(object: any) {
            var hoveredNode = d3.select(this);
            var event = d3["event"]["relatedTarget"];

            if (!isInside(event, hoveredNode)) {
                  // I only want to call the function below if the mouse sits inside the node itself, not when it hovers over the label
                  ctrl.onNodeHoverSelectedLocal(object);
            }
        });

    // this code runs when I hover over the label of the any node. It acts as a seperate part of the node. When I hover here and hover off I don't want the console.log above to run. Only when I come completely off the node itself.
            svg.selectAll("g.label").on("mouseover", function (object: any) {
                        var hoveredNode = d3.select(this);
                });

如何选择悬停在节点上的标签，然后将节点本身与标签进行比较，以便每次鼠标悬停时只获得一次console.log（＆＃34; hover＆＃34;）而不是每次我鼠标悬停并将鼠标输出节点的标签。

节点的DOM树如下所示：

 <g class="nodes">
   <g class="node">
      <rec rx="3" ry="3"></rect>
      <g class="label">
        <g transform="translate(#, #)">
           <text>
             <tspan>Node Label Here</tspan>
           </text>
        </g>
      </g>  
    </g>
   </g>

也可以打开其他解决方案。感谢