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

Question

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

问题是当鼠标进入Rect时，它会按预期播放音调，但是当他们将鼠标悬停在Rect内的Text上，然后退出Text并返回Rect时，鼠标悬停事件在再次调用 Rect。我想完全忽略鼠标进入文本，这样 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);
   }
});

但是 Firefox 似乎不支持 fromElement。参见 http://help.dottoro.com/ljjqfjbs.php

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

编辑

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

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

Text element causing Rect element to recall mouseover event

html

javascript

d3.js