d3js mousemove 事件没有冒泡答案

【问题标题】：d3js mousemove event is not bubblingd3js mousemove 事件没有冒泡
【发布时间】：2013-07-02 08:39:13
【问题描述】：

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

【问题讨论】：

标签： javascript events d3.js event-bubbling

【解决方案1】：

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

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

【讨论】：

是的，但是事件冒泡怎么样。不应该将 mousemove 事件提升到其父节点吗？我认为这就是普通 dom 元素的行为方式
啊，是的，对不起，我误解了你的问题。这对我来说很好——你能发布完整的代码吗？
对不起，我犯了一个错误。我对“mousedown”事件有疑问。 mousemove 事件对我来说也是冒泡的。
你确定 mousedown 工作正常吗？我查看了源代码，我注意到 d3js 调用了 d3_eventCancel() 方法，而这些方法又调用了 d3.event.stopPropagation();
不客气。我建议删除这个问题，以免混淆搜索类似内容的人。