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

d3js mousemove事件没有冒泡

1 个答案: