我有<g>
带有 <rect>
的元素和 <image>
里面。 <g>
有 mouseout 事件监听器。问题是,当我将鼠标从矩形移动到图像(在同一 g
内)时,会触发 mouseout 事件(后跟“mouseover”)。
举个例子。 (和 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事件触发?
最佳答案
当您在父容器上使用 mouseout 和 mouseover 时,您会在鼠标在后代元素之间移动时收到事件。如果您只想听到鼠标进入或离开父项的位置,请使用 mouseenter and mouseleave相反。
关于javascript - SVG:将鼠标移动到 <image> 元素会触发父 <g> 元素的 mouseout 事件 (d3.js),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17854897/