SVG: moving the mouse to the <image> element raises the mouseout event of the parent <g> element (d3.js)

Question

I have a <g> element with <rect> and <image> inside. <g> has a mouseout event listener. The problem is that when I move the mouse from the rectangle to the image (inside the same g ), the mouseout event is fired (followed by a "mouseover").

Here is an 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 mouseout event from firing?

Answer 1

When you use mouseout and mouseover in the 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 .

Answer 2

Using

onpointerleave

solved the problem.