节点及其子节点中的鼠标事件处理

Question

我在我的svg容器中有一堆节点。每个节点都有两个孩子：一个圆圈和一个文本标签，以便标签在圆圈内居中。

var nodes = d3.select("#main").selectAll("g.node"); 
var circles = nodes.append("circle"); 
var labels = nodes.append("text").style("text-anchor", "middle"); 

在鼠标悬停时，我执行一些额外的逻辑，例如，现在

nodes.on('mouseover', function() { 
    console.log('on mouse over'); 
}) 
.on('mouseout', function() { 
    console.log('on mouse out'); 
}); 

，问题是，很显然，在节点中的鼠标事件及其子标签分别处理：当我输入与鼠标光标的圆圈，则触发事件mouseover。然后，当我将光标移动到文本标签上方时，突然触发mouseover事件，就像光标离开圆圈并且另一个mouseover事件启动一样。

是否有可能“合并”节点及其子标签的事件处理，以便在我仍悬停在圆内时悬停在文本上而不会启动新的mouseover事件？

Answer 1

明白了：添加属性pointer-events与价值none禁止鼠标事件：

var labels = nodes 
    .append("text").style("text-anchor", "middle") 
    .attr("pointer-events", "none");