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 元素的监听器中的所有内容。