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");

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

1 个答案: