SVG：将鼠标移动到< image>元素触发parent< g>的mouseout事件元素（d3.js） [英] SVG: Moving mouse to <image> element triggers mouseout event of parent <g> element (d3.js)

问题描述

我有< g> 元素与< rect> 和 image> 里面。 < g> 有mouseout事件监听器。问题是，当我将鼠标从rect移动到图像（在同一个 g ），mouseout事件被触发（后面是'mouseover'）。

这里是例子。 （和 Jsfiddle ）

  var x = 120; 
 
 var g = d3.select（svg）
 .append（g）
 .on（'mouseover'，function（）{
 d3 .select（this）.append（text）。text（mouseover）。attr（'transform'，'translate（0，'+ x +'）'）; 
 x + = 20; 
）
 .on（'mouseout'，function（）{
 d3.select（this）.append（text）。 translate（0，'+ x +'）'; 
 x + = 20; 
}）
 
 g.append（rect）
 .attr width'，100）
 .attr（'height'，100）
 .style（'fill'，'lightgreen'）
 
 g.append b $ b .attr（width，30）
 .attr（height，30）
 .attr（x，35）
 .attr ）
 .attr（xlink：href，https://www.gravatar.com/avatar/f70adb32032d39add2559c2609a90d03?s=128&d=identicon&r=PG）
  
 
 
 
如何防止mouseout事件触发？
解决方案
 
当在父容器上使用mouseout和mouseover时，当鼠标在子元素之间移动时，您会收到事件。如果您只想听到鼠标进入或离开父母的位置，请使用  mouseenter 和 mouseleave  。
 
I have <g> element with <rect> and <image> inside. <g> has mouseout event listener. The problem is that when I move mouse from rect to image (within the same g), the mouseout event is triggered (followed by 'mouseover').

Here's example. (and Jsfiddle)
var x = 120;

var g = d3.select("svg")
    .append("g")
    .on('mouseover', function() {
        d3.select(this).append("text").text("mouseover").attr('transform','translate(0,'+x+')');
        x+=20;
    })
    .on('mouseout', function() {
        d3.select(this).append("text").text("mouseout").attr('transform','translate(0,'+x+')');  
        x+=20;  
    })

g.append("rect")
    .attr('width', 100)
    .attr('height', 100)
    .style('fill', 'lightgreen')

g.append('image')
    .attr("width", 30)
    .attr("height", 30)
    .attr("x", 35)
    .attr("y", 35)
    .attr("xlink:href","https://www.gravatar.com/avatar/f70adb32032d39add2559c2609a90d03?s=128&d=identicon&r=PG")
How to prevent the mouseout event from triggering?
解决方案
When you use mouseout and mouseover on a parent container, you get events when the mouse moves between descendant elements. If you only want to hear where the mouse enters or leaves the parent, use mouseenter and mouseleave instead.

                        
这篇关于SVG：将鼠标移动到&lt; image&gt;元素触发parent&lt; g&gt;的mouseout事件元素（d3.js）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！