javascript - SVG: マウスを要素に移動すると、親の mouseout イベントがトリガーされます要素 (d3.js)

Question

私は<g>要素<rect>と<image>内部を持っています。<g>mouseout イベントリスナーがあります。問題は、マウスを rect から image に (同じ 内で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").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")

mouseout イベントがトリガーされないようにするにはどうすればよいですか?