4

我有<g>元素<rect>和<image>里面。<g>有 mouseout 事件监听器。问题是当我将鼠标从矩形移动到图像（在同一个内g）时，会触发 mouseout 事件（随后是“鼠标悬停”）。

这是一个例子。（和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事件触发？

4

2 回答 2

12

当您在父容器上使用 mouseout 和 mouseover 时，您会在鼠标在后代元素之间移动时收到事件。如果您只想听到鼠标进入或离开父级的位置，请改用mouseenter和mouseleave。

于 2013-07-25T11:37:10.400 回答
-2

使用

onpointerleave

解决了问题。

于 2016-01-19T12:06:46.647 回答