我有一个类似于以下内容的 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 之外,所有回调都会被调用。我对我来说没有任何意义
最佳答案
如果元素的尺寸相同,则 g
元素将被 rect
遮挡。根据您想要执行的操作,有多种选择。
- 您可以增加
g
元素的大小,以便在鼠标刚刚离开rect
时触发该事件。 - 您可以完全删除
g
元素的监听器,并在rect
的处理程序中执行其操作。 - 同样,您可以从
rect
元素中删除监听器,并处理g
元素的监听器中的所有内容。
关于javascript - d3js mousemove事件不冒泡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17421067/