javascript - d3js mousemove 事件没有冒泡

Question

我有一个类似于以下的 svg 结构：

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

我已将相同的事件附加到#event-rect 和#main-group

 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. 根据您想要做什么，有几个选项。

• 您可以增加g元素的大小，以便在鼠标刚刚离开时触发事件rect。
• 您可以完全删除该g元素的侦听器并在rect.
• 同样，您可以从元素中移除侦听rect器并处理该元素的侦听器中的所有g内容。