d3js鼠标移动事件不冒泡

Question

我具有类似于下面的SVG结构：

<svg> 
    <g id="main-group"> 
    ... 
     <rect id="event-rect"></rect> 
    </g> 
</svg> 

和我已附加相同的事件到＃事件RECT和＃主族

d3.select('#event-rect').on('mousemove', clb); 
d3.select('#main-group').on('mousemove', clb2); 

这里的问题是第一个clb被触发，而父节点（即＃main-group）的事件侦听器不是。

为什么事件冒泡阶段不在这里工作？

使用实际的代码是：

d3.select('#event-rect').on('mousedown', mousedown); 
d3.select('#event-rect').on('mousemove', mousemove); 
d3.select('#event-rect').on('mouseup', mouseup); 

然后在另一个模块附上同一组中的事件：

d3.select('#main-group').on('mousedown', dragStart); 
d3.select('#main-group').on('mousemove', mousemove); 
d3.select('#main-group').on('mouseup', dragEnd); 

所有的回调被调用，除了在dragstart。我对我没有任何意义

Answer 1

如果元素的尺寸相同，则g元素将被rect遮蔽。取决于你想要做什么，有几个选项。

• 你可以增加，使得当鼠标刚刚离开rect该事件被触发g元素的大小。
• 您可以完全删除g元素的侦听器，并在rect的处理程序中执行其操作。
• 同样，您可以从rect元素中删除侦听器，并处理g元素的侦听器中的所有内容。