节点及其子节点中的鼠标事件处理
问题描述:
我在我的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
事件?
答
明白了:添加属性pointer-events
与价值none
禁止鼠标事件:
var labels = nodes
.append("text").style("text-anchor", "middle")
.attr("pointer-events", "none");