d3js鼠标移动事件没有冒泡

d3js mousemove event is not bubbling

本文关键字：事件 鼠标 移动 d3js      更新时间：2023-09-26

我有一个类似于以下的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之外，所有回调都被调用。我对我来说没有任何意义

如果元素的尺寸相同，则g元素将被rect遮挡。根据你想做什么，有几个选择。

  • 您可以增加g元素的大小，以便在鼠标刚离开rect时触发事件
  • 您可以完全删除g元素的侦听器，并在rect的处理程序中执行其操作
  • 类似地，您可以从rect元素中删除侦听器，并为g元素处理侦听器中的所有内容
相关文章：