javascript - 导致 Rect 元素调用鼠标悬停事件的文本元素

Question

我有一个包含文本的框，当用户使用鼠标进入该框时，我会播放一个音调(使用鼠标悬停事件)。这是使用 Rect 和 Text 元素完成的，它们是兄弟元素，都是 svg 元素的子元素(我使用的是 d3)。鼠标悬停事件附加到 Rect。

问题是，当鼠标进入 Rect 时，它按预期播放音调，但是当他们将鼠标悬停在 Rect 内的 Text 上，然后退出 Text 并返回 Rect 时，Rect 中的 mouseover 事件是又叫了。我想完全忽略鼠标进入文本，这样 Rect 事件只被触发一次，直到鼠标真正离开矩形并再次重新进入它时才会再次触发。这是一些代码:

svg.append("rect")
          .attr('width', boxSize)
          .attr('height', boxSize)
          .attr('x', x - boxSize / 2)
          .attr('y', y - boxSize / 2)
          .on("mouseover", function() {
                  var freq = GetFrequency(innerRowNum, innerRowIndex);
                  var oscillator = startOscillator(freq, true);
           });
svg.append("text")
          .attr("x", x)
          .attr("y", y)
          .attr("dy", ".35em")
          .attr("text-anchor", "middle")
          .style("font", "300 " + (boxSize * 0.6) + font)
          .style("fill", "white")
          .style("pointer-events", "none")
          .text("Text");

Answer 1

您可以使用事件的 fromElement 属性来检查鼠标之前是否在文本上:

svg.append("rect")
//...
.addEventListener("mouseover",function(evt){
   if( evt.fromElement.id != "text-id" ){
      var freq = GetFrequency(innerRowNum, innerRowIndex);
      var oscillator = startOscillator(freq, true);
   }
});

但是fromElement好像不被Firefox支持。参见 http://help.dottoro.com/ljjqfjbs.php

您还可以在父级上定义监听鼠标悬停并检查鼠标是否在矩形内。

编辑

另一种选择是使用标志来确保声音不会在鼠标悬停时执行，除非最初或移出矩形后。 http://jsfiddle.net/nhx0o33t/2/