Mouseenter和Mousleave在Firefox上按相反顺序触发

Question

我有以下代码仅在Firefox上以相反的顺序触发这些事件，它在所有其他浏览器上都能完美运行，我有点不知道为什么它们会以相反的顺序触发。

事件：

function highlightNodeLinks(highlightNode, i) {
    var remainingNodes = [],
        nextNodes = [],
        strokeOpacity = 0,
        traverse;

    if ( d3.select(this).attr('data-hover') === '1' ) {
      d3.select(this).attr('data-hover', '0');
      strokeOpacity = 0.2;
    } else {
      d3.select(this).attr('data-hover', '1');
      strokeOpacity = 0.5;
    }

    traverse = [{
      linkType : 'sourceLinks',
      nodeType : 'target'
    }, {
      linkType : 'targetLinks',
      nodeType : 'source'
    }];

    traverse.forEach(function (step) {
      highlightNode[step.linkType].forEach(function (linkPath) {
        remainingNodes.push(linkPath[step.nodeType]);
        highlightLink(linkPath.id, strokeOpacity);
      });

      while (remainingNodes.length) {
        nextNodes = [];
        remainingNodes.forEach(function (newNode) {
          newNode[step.linkType].forEach(function (linkPath) {
            nextNodes.push(linkPath[step.nodeType]);
            highlightLink(linkPath.id, strokeOpacity);
          });
        });
        remainingNodes = nextNodes;
      }
    });
  }

  function highlightLink(id, opacity) {
    d3.select('#link-' + id).style('stroke-opacity', opacity);
  }

函数调用的顺序：

 node = svg.append('g').selectAll('.node')
  .data(customerData.nodes)
  .enter().append('g')
  .attr('class', 'node')
  .attr('data-hover', '1')
  .attr('transform', function (d) {
      return 'translate(' + d.x + ',' + d.y + ')';
  })
  .on('mouseenter', highlightNodeLinks)
  .on('mouseleave', highlightNodeLinks)

再次，这些似乎只在FF中以相反的顺序触发，我不确定为什么。