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",";d=identicon&r=PG")

How to prevent the mouseout event from triggering?

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./avatar/f70adb32032d39add2559c2609a90d03?s=128&d=identicon&r=PG")

How to prevent the mouseout event from triggering?

• javascript
• dom
• svg
• d3.js

• tried hover? gives the same effect? – user2587132 Commented Jul 25, 2013 at 10:12
• This question might help. – Lars Kotthoff Commented Jul 25, 2013 at 11:14

2 Answers 2

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.

Using

onpointerleave

solved problem.