SVG: Moving mouse to <image> element triggers mouseout event of parent <g> element (d3.js)

Question

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?

Answer 1

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.