4

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?

eagor
  • 9,150
  • 8
  • 47
  • 50

2 Answers2

12

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.

mbostock
  • 51,423
  • 13
  • 175
  • 129
  • Thank you! BTW, mouseenter and mouseleave didn't work in 3.0.6. Needed to update to latest version of d3.js (3.2.7 for the time being) – eagor Jul 25 '13 at 13:05
  • The mouseenter and mouseleave polyfills were added in 3.1. See the [release notes](https://github.com/mbostock/d3/releases) for the full history. – mbostock Jul 25 '13 at 17:45
-2

Using

onpointerleave

solved problem.

alexey
  • 783
  • 1
  • 7
  • 19