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

我的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

事件开始一样

---

是否有可能“合并”节点及其子标签的事件处理，以便当我将鼠标悬停在文本上而仍在圆圈内时，没有新的

鼠标悬停

事件启动？

明白了：添加属性

指针事件

，值为

无

以禁止鼠标事件：

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